<template>
  <div class="article-detail-page" :class="{ 'is-preview-mode': isPreviewMode }">
    <!-- Skeleton Loading -->
    <div v-if="loading" class="article-skeleton">
      <div class="skeleton-wrapper">
        <!-- 骨架屏封面图 -->
        <div class="skeleton-cover-container">
          <div class="skeleton-cover shine"></div>
        </div>

        <div class="skeleton-content-layout">
          <!-- 主内容区 -->
          <div class="skeleton-main">
            <!-- 标题和作者区 -->
            <div class="skeleton-header">
              <div class="skeleton-title shine"></div>
              <div class="skeleton-subtitle shine"></div>

              <div class="skeleton-author">
                <div class="skeleton-avatar shine"></div>
                <div class="skeleton-author-info">
                  <div class="skeleton-author-name shine"></div>
                  <div class="skeleton-meta shine"></div>
                </div>
              </div>

              <div class="skeleton-stats">
                <div class="skeleton-stat-item shine"></div>
                <div class="skeleton-stat-item shine"></div>
                <div class="skeleton-stat-item shine"></div>
              </div>
            </div>

            <!-- 文章概要区 -->
            <div class="skeleton-summary">
              <div class="skeleton-summary-header shine"></div>
              <div class="skeleton-summary-content shine"></div>
            </div>

            <!-- 文章内容区 -->
            <div class="skeleton-content">
              <div class="skeleton-paragraph shine"></div>
              <div class="skeleton-paragraph shine" style="width: 95%"></div>
              <div class="skeleton-paragraph shine" style="width: 88%"></div>

              <div class="skeleton-subheading shine"></div>
              <div class="skeleton-paragraph shine" style="width: 92%"></div>
              <div class="skeleton-paragraph shine" style="width: 96%"></div>

              <div class="skeleton-image shine"></div>

              <div class="skeleton-paragraph shine" style="width: 90%"></div>
              <div class="skeleton-paragraph shine" style="width: 94%"></div>

              <div class="skeleton-subheading shine"></div>
              <div class="skeleton-paragraph shine" style="width: 87%"></div>
              <div class="skeleton-paragraph shine" style="width: 91%"></div>
              <div class="skeleton-paragraph shine" style="width: 85%"></div>

              <div class="skeleton-code shine"></div>

              <div class="skeleton-paragraph shine" style="width: 89%"></div>
              <div class="skeleton-paragraph shine" style="width: 93%"></div>
            </div>

            <!-- 底部区域 -->
            <div class="skeleton-footer">
              <div class="skeleton-tags">
                <div class="skeleton-tag shine"></div>
                <div class="skeleton-tag shine"></div>
                <div class="skeleton-tag shine"></div>
              </div>
              <div class="skeleton-actions">
                <div class="skeleton-action-btn shine"></div>
                <div class="skeleton-action-btn shine"></div>
              </div>
            </div>
          </div>

          <!-- 侧边栏 -->
          <div class="skeleton-sidebar">
            <div class="skeleton-sidebar-header shine"></div>
            <div class="skeleton-toc">
              <div class="skeleton-toc-item shine"></div>
              <div class="skeleton-toc-item shine" style="width: 80%"></div>
              <div class="skeleton-toc-item shine" style="width: 70%"></div>
              <div class="skeleton-toc-item shine" style="width: 85%"></div>
              <div class="skeleton-toc-item shine" style="width: 75%"></div>
              <div class="skeleton-toc-item shine" style="width: 90%"></div>
              <div class="skeleton-toc-item shine" style="width: 60%"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Article Content -->
    <div v-else>
      <ArticleCover v-if="article.cover" :cover-url="article.cover" :title="article.title" />
      <div class="article-page-content">
        <!-- 美化固定操作栏 -->
        <div class="action-bar-container" v-if="!article.draftMode" @mouseenter="cancelAutoHide"
          @mouseleave="resetActionBarTimer">
          <div class="action-bar-trigger" @click="toggleActionBar" v-show="isActionBarHidden">
            <i class="fas fa-angle-right"></i>
          </div>
          <transition name="slide-fade">
            <div class="floating-action-bar" v-show="!isActionBarHidden">
              <div class="action-bar-header">
                <div class="action-bar-close" @click="toggleActionBar">
                  <i class="fas fa-angle-left"></i>
                </div>
              </div>
              <div class="action-bar-content">
                <el-tooltip class="item" effect="dark" content="点赞" placement="right">
                  <div class="action-item" @click="toggleLike">
                    <el-badge :value="article.likeNum || 0" class="item" type="primary">
                      <div class="action-button">
                        <i class="fas fa-thumbs-up" :class="{ active: article.isLike }"></i>
                      </div>
                    </el-badge>
                  </div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="收藏" placement="right">
                  <div class="action-item" @click="toggleFavorite">
                    <el-badge :value="article.favoriteNum || 0" class="item" type="warning">
                      <div class="action-button">
                        <i class="fas fa-star" :class="{ active: article.isFavorite }"></i>
                      </div>
                    </el-badge>
                  </div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="沉浸式浏览" placement="right">
                  <div class="action-item" @click="toggleSidebar">
                    <div class="action-button">
                      <i class="fas fa-expand"></i>
                    </div>
                  </div>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="评论" placement="right">
                  <div class="action-item" @click="scrollToComments">
                    <el-badge :value="article.commentNum || 0" class="item" type="info">
                      <div class="action-button">
                        <i class="fas fa-comment"></i>
                      </div>
                    </el-badge>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </transition>
        </div>

        <div class="content-layout" id="articleBox"
          :class="{ center: !showSidebar, 'restricted-mode': article.draftMode }">
          <main class="article-main">
            <!-- 受限访问视图 -->
            <div v-if="article.draftMode" class="restricted-view">
              <i class="fas fa-eye-slash restricted-icon"></i>
              <h2 class="restricted-title">此文章尚未发布/未公开</h2>
              <p class="restricted-text">该文章处于草稿中或正在审核中，暂不可访问。</p>
            </div>

            <!-- 完整文章视图 -->
            <template v-else>
              <!-- 文章头部 -->
              <header class="article-header">
                <div class="article-title">{{ article.title }}</div>

                <!-- 文章状态提示 (仅作者和管理员可见) -->
                <div v-if="article.status !== 1 && isAuthor" class="article-status-alert">
                  <i class="fas" :class="article.status === 0 ? 'fa-clock' : 'fa-file-alt'"></i>
                  <span>{{ article.status === 0 ? '该文章正在审核中' : '该文章为草稿状态' }}</span>
                  <span class="status-tip">（仅您可见）</span>
                </div>

                <!-- 作者信息和元数据 -->
                <div class="article-info">
                  <div class="author-info">
                    <el-popover ref="authorPopover" placement="bottom-start" trigger="hover" :width="300"
                      :hide-after="0">
                      <template #reference>
                        <img v-lazy="article.avatar" alt="作者头像" class="author-avatar"
                          @click="goToUserPage(article.userId)">
                      </template>
                      <UserProfileCard v-if="article.userId" :user-id="article.userId"
                        @close-popover="closeAuthorPopover" />
                    </el-popover>
                    <div class="author-meta" @click="goToUserPage(article.userId)">
                      <span class="author-name">{{ article.nickname }}</span>
                      <div class="post-meta">
                        <time class="publish-time">
                          <i class="far fa-calendar-alt"></i>
                          {{ article.createTime }}
                        </time>
                        <time v-if="article.updateTime && article.updateTime !== article.createTime"
                          class="update-time">
                          <i class="far fa-clock"></i>
                          (更新于 {{ article.updateTime }})
                        </time>
                        <span class="meta-divider">·</span>
                        <span class="category">
                          <i class="fas fa-folder"></i>
                          {{ article.category.name }}
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="article-stats">
                    <div class="stat-item">
                      <i class="far fa-eye"></i>
                      <span>{{ article.quantity }} 阅读</span>
                    </div>
                    <div class="stat-item">
                      <i class="far fa-clock"></i>
                      <span>{{ readTime }} 分钟</span>
                    </div>
                    <div class="stat-item">
                      <i class="far fa-comment"></i>
                      <span>{{ article.commentNum || 0 }} 评论</span>
                    </div>
                  </div>
                </div>
              </header>

              <!-- AI简短介绍 -->
              <div v-if="article.aiDescribe" class="ai-description">
                <div class="ai-header" @click="isAiDescriptionExpanded = !isAiDescriptionExpanded">
                  <i class="fas fa-robot"></i>
                  <span>AI 摘要</span>
                  <i class="fas" :class="isAiDescriptionExpanded ? 'fa-chevron-up' : 'fa-chevron-down'"
                    style="margin-left:auto;"></i>
                </div>
                <transition name="expand" @enter="startTransition" @leave="endTransition" mode="out-in">
                  <div class="ai-content" v-show="isAiDescriptionExpanded">
                    <span class="typing-text" ref="typingText"></span>
                    <div class="ai-description-text">
                      摘要由平台通过智能技术生成
                    </div>
                  </div>
                </transition>
              </div>

              <!-- 文章内容 -->
              <article class="article-content">
                <!-- 内容显示逻辑 -->
                <div v-if="article.fullContent" v-html="processedContent"></div>
                <div v-else class="locked-content">
                  <div class="preview-content" v-html="processedContent"></div>
                  <div class="content-locker">
                    <div class="locker-icon">
                      <i class="fas fa-lock"></i>
                    </div>
                    <h3>内容已锁定</h3>
                    <p>{{ lockMessage }}</p>
                    <div class="locker-progress">
                      <div class="progress-steps">
                        <div class="progress-step"
                          :class="{ 'completed': article.readType === 1 || article.isCommented }">
                          <div class="step-circle">
                            <i class="fas" :class="article.isCommented ? 'fa-check' : 'fa-comment'"></i>
                          </div>
                          <div class="step-label">评论</div>
                        </div>
                        <div class="progress-line" :class="{ 'active': article.readType === 3 }"></div>
                        <div class="progress-step" :class="{ 'completed': article.readType === 2 || article.isLike }">
                          <div class="step-circle">
                            <i class="fas" :class="article.isLike ? 'fa-check' : 'fa-heart'"></i>
                          </div>
                          <div class="step-label">点赞</div>
                        </div>
                      </div>
                    </div>
                    <div class="locker-actions">
                      <el-button v-if="article.readType === 1 || (article.readType === 3 && !article.isCommented)"
                        type="primary" @click="scrollToComments" icon="fas fa-comment-dots">
                        去评论
                      </el-button>
                      <el-button v-if="article.readType === 2 || (article.readType === 3 && !article.isLike)"
                        type="success" @click="toggleLike" icon="fas fa-thumbs-up">
                        点赞解锁
                      </el-button>
                    </div>
                  </div>
                </div>
              </article>

              <!-- 文章底部 -->
              <footer class="article-footer">
                <!-- 版权声明提示 -->
                <div class="copyright-notice">
                  <div class="notice-header">
                    <i class="fas fa-copyright"></i>
                    <span>版权声明</span>
                  </div>
                  <div class="notice-content">
                    <div v-if="article.isOriginal" class="notice-item">
                      <i class="fas fa-check-circle"></i>
                      <span>本文由 {{ article.nickname }} 原创发布</span>
                    </div>
                    <div v-else class="notice-item">
                      <i class="fas fa-share-alt"></i>
                      <span>本文转载自：<a :href="article.originalUrl" target="_blank" rel="noopener noreferrer">{{
                        article.originalUrl || '未知来源' }}</a></span>
                    </div>
                    <div class="notice-item">
                      <i class="fas fa-calendar-alt"></i>
                      <span>发布时间：{{ article.createTime }}</span>
                    </div>
                    <div class="notice-item">
                      <i class="fab fa-creative-commons-sa"></i>
                      <span>
                        版权协议：
                        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank"
                          rel="noopener noreferrer">
                          CC BY-NC-SA 4.0
                        </a>
                      </span>
                    </div>
                    <div class="notice-item notice-warning">
                      <i class="fas fa-exclamation-triangle"></i>
                      <span>未经许可，禁止转载、摘编、复制或建立镜像。欢迎转发分享！</span>
                    </div>
                  </div>
                </div>

                <!-- 标签部分保持不变 -->
                <div class="tags-section">
                  <i class="fas fa-tags"></i>
                  <div class="tags-list">
                    <router-link v-for="tag in article.tags" :key="tag.id"
                      :to="`/tags?tagId=${tag.id}&tagName=${tag.name}`" class="tag-item">
                      {{ tag.name }}
                    </router-link>
                  </div>
                </div>

                <!-- 修改操作按钮部分 -->
                <div class="article-actions">
                  <button class="action-btn like" :class="{ active: article.isLike }" @click="toggleLike">
                    <i class="fas fa-heart"></i>
                    <span>{{ article.likeNum }}</span>
                  </button>
                  <div class="share-dropdown" v-click-outside="closeShareMenu">
                    <button class="action-btn share" @click="toggleShareMenu">
                      <i class="fas fa-share-alt"></i>
                      分享
                    </button>
                    <div class="share-menu" v-show="showShareMenu">
                      <button class="share-item" @click="shareToQQ">
                        <i class="fab fa-qq"></i>
                        QQ好友
                      </button>
                      <button class="share-item" @click="shareToQzone">
                        <i class="fas fa-star"></i>
                        QQ空间
                      </button>
                      <button class="share-item" @click="shareToWeibo">
                        <i class="fab fa-weibo"></i>
                        微博
                      </button>
                      <button class="share-item" @click="shareToWechat">
                        <i class="fab fa-weixin"></i>
                        微信
                      </button>
                      <button class="share-item" @click="copyLink">
                        <i class="fas fa-link"></i>
                        复制链接
                      </button>
                    </div>
                  </div>
                </div>
              </footer>

              <!-- 文章导航 -->
              <ArticleNavigation v-if="article.id && !article.draftMode" :article-id="article.id" />

              <!-- 相关文章 -->
              <RelatedArticles v-if="article.id && !article.draftMode" :article-id="article.id" />

              <!-- 添加评论组件 -->
              <Comment v-if="!article.forbidComment" :article-id="$route.params.id"
                :comment-count="article.commentNum || 0" :article-author-id="article.userId || ''"
                @comment-added="handleCommentAdded" @comment-deleted="handleCommentDeleted" />
            </template>
          </main>

          <!-- 侧边栏 -->
          <aside v-if="showSidebar && !article.draftMode" class="article-sidebar desktop-only">
            <div class="toc-container">
              <div class="toc-header">
                <div class="title-wrapper">
                  <i class="fas fa-list"></i>
                  <span>目录</span>
                </div>
                <div class="toc-controls">
                  <div class="auto-scroll-controls">
                    <el-tooltip content="自动滚动" placement="top" effect="light">
                      <button class="auto-scroll-btn" @click="toggleAutoScroll" :class="{ active: isAutoScrolling }">
                        <i class="fas" :class="isAutoScrolling ? 'fa-pause' : 'fa-play'"></i>
                      </button>
                    </el-tooltip>
                    <el-tooltip content="滚动速度" placement="top" effect="light">
                      <button class="speed-settings-btn" @click="showSpeedControls = !showSpeedControls">
                        <i class="fas fa-tachometer-alt"></i>
                      </button>
                    </el-tooltip>

                    <!-- 速度控制面板 -->
                    <transition name="fade">
                      <div class="speed-control-panel" v-show="showSpeedControls">
                        <div class="panel-header">
                          <span>滚动速度</span>
                          <button class="close-panel-btn" @click="showSpeedControls = false">
                            <i class="fas fa-times"></i>
                          </button>
                        </div>
                        <div class="speed-options">
                          <button v-for="option in speedOptions" :key="option.value" class="speed-option-btn"
                            :class="{ active: autoScrollSpeed === option.value }" @click="setScrollSpeed(option.value)">
                            {{ option.label }}
                          </button>
                        </div>
                        <div class="custom-speed">
                          <span>自定义:</span>
                          <el-slider v-model="autoScrollSpeed" :min="0.2" :max="5" :step="0.1"
                            :format-tooltip="value => `${value}x`" @change="onSpeedChange"></el-slider>
                        </div>
                      </div>
                    </transition>
                  </div>
                  <div class="progress-wrapper" :class="{ completed: readProgress === 100 }">
                    <i class="fas fa-book-reader"></i>
                    <span class="progress-text">{{ readProgress }}</span>
                  </div>
                </div>
              </div>
              <div class="toc-content" ref="tocContent">
                <el-tooltip v-for="(item, index) in tocItems" :key="index" :content="item.text" placement="right"
                  :effect="'light'" :disabled="false" :enterable="false" :open-delay="300">
                  <div class="toc-item" :class="{
                    'active': activeHeading === item.id,
                    [`level-${item.level}`]: true
                  }" @click="scrollToHeading(item.id)">
                    <span class="toc-indicator" :style="{ opacity: activeHeading === item.id ? 1 : 0 }">•</span>
                    <span class="toc-text">{{ item.text }}</span>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </aside>
        </div>
        <mj-image-preview ref="imagePreview" />
      </div>
    </div>
  </div>
</template>

<script>
import { getArticleDetailApi, likeArticleApi } from '@/api/article'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import Comment from '@/components/Comment/index.vue'
import ArticleCover from '@/components/ArticleCover/index.vue'
import UserProfileCard from '@/components/UserProfileCard/index.vue'
import { marked } from 'marked'
import RelatedArticles from '@/components/Article/RelatedArticles.vue'
import ArticleNavigation from '@/components/Article/ArticleNavigation.vue'

export default {
  name: 'Article',
  props: {
    previewData: {
      type: Object,
      default: null
    },
    isPreviewMode: {
      type: Boolean,
      default: false
    }
  },
  metaInfo() {
    // 安全地获取文章属性，提供默认值以防止在API响应前出错
    const articleTitle = this.article.title || '文章详情';
    const articleContent = this.article.content || '';
    const articleSummary = this.article.summary || '';
    const articleTags = this.article.tags || [];
    const siteLogo = this.$store.state.webSiteInfo ? this.$store.state.webSiteInfo.logo : '';
    const articleCover = this.article.cover || siteLogo;
    const articleUrl = `https://blog.kingcola-icg.cn/post/${this.article.id || ''}`;

    const description = articleSummary || (articleContent ? articleContent.replace(/<[^>]+>/g, '').substring(0, 160) + '...' : 'KingCola-ICG Blog - 一个专注于技术分享的博客。');
    const keywords = articleTags.length > 0 ? articleTags.map(tag => tag.name).join(', ') : 'KingCola-ICG, 博客, 技术博客, 前端, 后端';

    return {
      title: `${articleTitle} | KingCola-ICG Blog`,
      meta: [
        { vmid: 'description', name: 'description', content: description },
        { vmid: 'keywords', name: 'keywords', content: keywords },
        { vmid: 'og:title', property: 'og:title', content: articleTitle },
        { vmid: 'og:description', property: 'og:description', content: description },
        { vmid: 'og:type', property: 'og:type', content: 'article' },
        { vmid: 'og:url', property: 'og:url', content: articleUrl },
        { vmid: 'og:image', property: 'og:image', content: articleCover },
        { vmid: 'og:site_name', property: 'og:site_name', content: 'KingCola-ICG Blog' },
        { vmid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
        { vmid: 'twitter:title', name: 'twitter:title', content: articleTitle },
        { vmid: 'twitter:description', name: 'twitter:description', content: description },
        { vmid: 'twitter:image', name: 'twitter:image', content: articleCover },
      ],
      link: [
        { rel: 'canonical', href: articleUrl }
      ],
      script: [
        {
          vmid: 'structured-data',
          type: 'application/ld+json',
          json: {
            '@context': 'https://schema.org',
            '@type': 'BlogPosting',
            'mainEntityOfPage': {
              '@type': 'WebPage',
              '@id': articleUrl
            },
            'headline': articleTitle,
            'image': [articleCover],
            'datePublished': this.article.createTime || new Date().toISOString(),
            'dateModified': this.article.updateTime || this.article.createTime || new Date().toISOString(),
            'author': {
              '@type': 'Person',
              'name': this.article.nickname || 'KingCola-ICG'
            },
            'publisher': {
              '@type': 'Organization',
              'name': 'KingCola-ICG Blog',
              'logo': {
                '@type': 'ImageObject',
                'url': siteLogo
              }
            },
            'description': description
          }
        }
      ]
    }
  },
  components: {
    Comment,
    ArticleCover,
    UserProfileCard,
    RelatedArticles,
    ArticleNavigation
  },
  data() {
    return {
      article: {
        title: '',
        category: {},
        isOriginal: true,
        readType: 0,
        fullContent: true, // 默认为true，避免加载时闪烁
        updateTime: null,
        isCommented: false // 添加是否已评论标记
      },
      prevArticle: {
        id: 1,
        title: '默认文章',
      },
      nextArticle: {
        id: 1,
        title: '默认文章',
      },
      tocItems: [],
      readProgress: 0,
      showShareMenu: false,
      activeHeading: '',
      likeDebounce: false,
      loading: false,
      actionBarLeft: '0px',
      showSidebar: true,
      contentLayout: 'center',
      collapsedCodeBlocks: new Set(),
      images: [],
      showPaymentDialog: false,
      showMembershipDialog: false,
      isAiDescriptionExpanded: true,
      isActionBarHidden: false,
      actionBarTimer: null,
      // 添加自动滚动相关属性
      isAutoScrolling: false,
      autoScrollInterval: null,
      autoScrollSpeed: 1, // 默认滚动速度(像素/间隔)
      showSpeedControls: false, // 控制速度面板显示
      speedOptions: [
        { label: '慢速', value: 0.5 },
        { label: '正常', value: 1 },
        { label: '中速', value: 2 },
        { label: '快速', value: 3.5 }
      ],
      isProgrammaticScroll: false, // 增加一个标志位，用于判断是否是程序化滚动
    }
  },
  computed: {
    processedContent() {
      if (!this.article.content) {
        return '';
      }
      const parser = new DOMParser();
      const doc = parser.parseFromString(this.article.content, 'text/html');
      const images = doc.getElementsByTagName('img');
      const articleTitle = this.article.title || 'KingCola-ICG Blog 文章图片';

      for (let i = 0; i < images.length; i++) {
        const img = images[i];
        if (!img.getAttribute('alt') || img.getAttribute('alt').trim() === '') {
          img.setAttribute('alt', `${articleTitle} - 图片 ${i + 1}`);
        }
      }
      return doc.body.innerHTML;
    },
    isAuthor() {
      // 判断当前登录用户是否是文章作者
      if (!this.$store.state.userInfo || !this.article.userId) {
        return false;
      }
      // 转换为字符串进行比较，避免类型不匹配问题
      const currentUserId = String(this.$store.state.userInfo.id);
      const articleUserId = String(this.article.userId);
      return currentUserId === articleUserId;
    },
    readTime() {
      // 计算阅读时间
      const text = this.article.content?.replace(/<[^>]+>/g, '') || ''
      return Math.ceil(text.split(/\s+/).length / 300)
    },
    lockMessage() {
      if (this.article.readType === 3) {
        // 需要评论+点赞
        if (this.article.isCommented && !this.article.isLike) {
          return '您已评论，还需点赞后才能查看全部内容';
        } else if (!this.article.isCommented && this.article.isLike) {
          return '您已点赞，还需评论后才能查看全部内容';
        }
        return '评论并点赞本文后即可查看全部内容';
      } else if (this.article.readType === 1) {
        return '评论本文后即可查看全部内容';
      } else if (this.article.readType === 2) {
        return '点赞本文后即可查看全部内容';
      }
      return '完成指定操作后即可解锁';
    },
    currentUrl() {
      return window.location.href
    },
    // 添加对文章状态的判断和处理
    articleStatus() {
      if (!this.article.status) return 1; // 默认为发布状态
      return this.article.status;
    },
    isDraft() {
      return this.article.status === 2;
    },
    isUnderReview() {
      return this.article.status === 0;
    }
  },
  methods: {
    /**
     * 根据传入的数据渲染文章预览
     */
    renderPreview(data) {
      this.loading = true;

      // 合并默认对象和传入的数据
      const defaultArticle = {
        title: '文章加载失败',
        category: { name: '未分类' },
        tags: [],
        content: '',
        nickname: '未知作者',
        avatar: '',
        createTime: '',
        updateTime: '',
        quantity: 0,
        commentNum: 0,
        likeNum: 0,
        isLike: false,
        isCommented: false,
        isOriginal: 1,
        originalUrl: '',
        aiDescribe: ''
      };

      this.article = Object.assign({}, defaultArticle, data);
      this.article.content = data.content ? this.addLazyLoadToImages(data.content) : '';

      // 等待下一个 tick，确保文章内容渲染完成
      this.$nextTick(() => {
        // 使用一个更长的延时来确保弹窗内的DOM完全稳定
        setTimeout(() => {
          this.initializeArticleView();
          this.loading = false;
        }, 300); // 增加延时
      })
    },
    /**
     * 公开方法：由父组件调用，用于在DOM准备好后初始化视图
     */
    triggerInitialization() {
      // 使用nextTick确保Vue的渲染队列已清空
      this.$nextTick(() => {
        // 使用短延时等待浏览器完成最后的布局计算
        setTimeout(() => {
          this.initializeArticleView();
        }, 50);
      });
    },
    /**
     * 统一初始化文章视图的各种功能
     */
    initializeArticleView() {
      if (!this.$el || this.article.draftMode) return;

      // 使用轮询和 requestAnimationFrame 来等待标题元素渲染完成
      const waitForHeadings = new Promise((resolve, reject) => {
        const maxAttempts = 100; // 大约3秒的超时
        let attempts = 0;

        const check = () => {
          // 检查是否存在至少一个标题元素
          if (this.$el.querySelector('.article-content h1, .article-content h2, .article-content h3')) {
            resolve();
          } else if (attempts < maxAttempts) {
            attempts++;
            requestAnimationFrame(check); // 在下一帧继续检查
          } else {
            reject(new Error("TOC headings did not render in time."));
          }
        };
        check();
      });

      waitForHeadings.then(() => {
        // 确认标题已渲染，现在可以安全地执行所有依赖DOM的操作
        this.generateToc();
        this.$el.querySelectorAll('pre code').forEach((block) => {
          hljs.highlightBlock(block);
        });
        this.addCopyButtons();
        this.addLineNumbers();
        this.initImagePreview();
        this.initializeCodeBlocks();
        this.processArticleLinks();
        this.updateActionBarPosition();

        if (this.article.aiDescribe && !this.article.draftMode) {
          const typingText = this.$refs.typingText;
          if (typingText) {
            const htmlContent = marked(this.article.aiDescribe || '');
            typingText.innerHTML = htmlContent;
          }
        }
      }).catch(error => {
        console.error("Failed to initialize article view:", error);
        this.$message.error('预览内容加载超时，目录可能无法正常显示。');
      });
    },
    closeAuthorPopover() {
      if (this.$refs.authorPopover) {
        this.$refs.authorPopover.doClose();
      }
    },
    goToUserPage(userId) {
      if (userId) {
        this.$router.push(`/user/${userId}`)
      }
    },
    /**
   * 切换操作栏显示/隐藏
   */
    toggleActionBar() {
      this.isActionBarHidden = !this.isActionBarHidden;

      // 如果显示了操作栏，设置定时器自动隐藏
      if (!this.isActionBarHidden) {
        this.resetActionBarTimer();
      }
    },

    /**
     * 重置操作栏自动隐藏定时器
     */
    resetActionBarTimer() {
      // 清除现有定时器
      if (this.actionBarTimer) {
        clearTimeout(this.actionBarTimer);
      }

      // 设置新定时器，5秒后自动隐藏
      this.actionBarTimer = setTimeout(() => {
        this.isActionBarHidden = true;
      }, 5000);
    },
    /**
   * 取消自动隐藏
   */
    cancelAutoHide() {
      // 清除现有定时器，防止自动隐藏
      if (this.actionBarTimer) {
        clearTimeout(this.actionBarTimer);
        this.actionBarTimer = null;
      }
    },
    /**
     * 获取文章详情
     */
    async getArticle() {
      this.loading = true
      hljs.configure({
        ignoreUnescapedHTML: true
      })
      try {
        const res = await getArticleDetailApi(this.$route.params.id)

        // 创建一个默认的文章对象结构，防止模板渲染时出错
        const defaultArticle = {
          title: '文章加载失败',
          category: { name: '未分类' },
          tags: [],
          content: '',
          // 为其他可能为null的字段提供默认值
          nickname: '未知作者',
          avatar: '',
          createTime: '',
          updateTime: '',
          quantity: 0,
          commentNum: 0,
          likeNum: 0,
          isLike: false,
          isCommented: false, // 添加是否已评论标记
          isOriginal: 1,
          originalUrl: '',
          aiDescribe: ''
        };

        // 合并默认对象和API返回的数据
        this.article = Object.assign({}, defaultArticle, res.data);

        console.log('文章数据详情:', this.article)
        console.log('用户信息详情:', this.$store.state.userInfo ? {
          id: this.$store.state.userInfo.id,
          roles: this.$store.state.userInfo.roles
        } : '未登录')

        // 单独处理需要特殊逻辑的content字段
        this.article.content = res.data.content ? this.addLazyLoadToImages(res.data.content) : '';

        // 更新页面标题
        if (this.article.title) {
          const baseTitle = "🎯 KingCola-ICG Blog | 始于代码，不止于代码";
          let titleDesc = (this.article.category && this.article.category.name) ? this.article.category.name : '技术文章';

          let statusPrefix = '';
          if (this.article.status === 2) {
            statusPrefix = '[草稿] ';
          } else if (this.article.status === 0) {
            statusPrefix = '[审核中] ';
          }

          document.title = `${statusPrefix}${this.article.title} | ${titleDesc} - ${baseTitle}`;
          this.$store.commit('SET_CURRENT_ARTICLE', this.article);
        }

        // 等待下一个 tick，确保文章内容渲染完成
        await this.$nextTick()

        // 使用 setTimeout 确保 DOM 完全渲染
        setTimeout(() => {
          // 只有非草稿访问限制模式才执行这些操作
          if (!this.article.draftMode) {
            this.generateToc()
            document.querySelectorAll('pre code').forEach((block) => {
              hljs.highlightBlock(block)
            })
            this.addCopyButtons()
            this.addLineNumbers()
            this.initImagePreview()
            this.initializeCodeBlocks()

            // 处理文章内容中的外部链接，使用全局链接跳转提示
            this.processArticleLinks()
          }

          this.updateActionBarPosition()

          // AI摘要 - 仅在非草稿限制模式下显示
          if (this.article.aiDescribe && !this.article.draftMode) {
            const typingText = this.$refs.typingText
            if (!typingText) return
            const htmlContent = marked(this.article.aiDescribe || '')
            typingText.innerHTML = htmlContent
          }
        }, 100)

      } catch (error) {
        this.$message.error('获取文章详情失败')
      } finally {
        this.loading = false
      }
    },
    /**
     * 为文章内容中的图片添加懒加载
     */
    addLazyLoadToImages(content) {
      // 使用data-src来存储实际图片地址，并添加lazy-image类用于识别
      return content.replace(
        /<img([^>]*)src="([^"]*)"([^>]*)>/gi,
        '<img$1src="' + this.getLoadingImage() + '" data-src="$2" class="lazy-image"$3>'
      )
    },
    /**
     * 获取加载中的图片
     */
    getLoadingImage() {
      return 'https://img.picui.cn/free/2025/04/01/67ebabede6a6b.gif'
    },
    /**
     * 生成目录
     */
    generateToc() {
      if (!this.$el) return;
      // 只获取文章内容区域的标题，排除AI摘要区域
      const headings = this.$el.querySelectorAll('.article-content h1,.article-content h2,.article-content h3,.article-content h4,.article-content h5,.article-content h6')
      this.tocItems = Array.from(headings).map(heading => {
        // 为标题创建唯一ID，确保不与AI摘要区域的ID冲突
        const id = 'article-heading-' + heading.textContent.trim().toLowerCase().replace(/\s+/g, '-')
        // 为标题设置ID
        heading.id = id
        return {
          id,
          text: heading.textContent,
          level: parseInt(heading.tagName.charAt(1))
        }
      })
    },
    /**
     * 点赞
     */
    toggleLike() {
      if (this.isPreviewMode) {
        this.$message.info('预览模式下无法操作');
        return;
      }
      //防止频繁点击 设置一个5秒的防抖
      if (this.likeDebounce) {
        this.$message.warning('请于 5 秒后再试')
        return
      }
      if (!this.$store.state.userInfo) {
        this.$message.warning('请先登录再点赞哦');
        return;
      }
      // 实现点赞功能
      likeArticleApi(this.$route.params.id).then(res => {
        const isNowLiked = !this.article.isLike;
        this.$message.success(isNowLiked ? '点赞成功' : '取消点赞成功')

        // 如果是点赞解锁，并且是点赞操作，则刷新文章
        if ((this.article.readType === 2 || this.article.readType === 3) && isNowLiked) {
          this.getArticle();
        } else {
          if (this.article.isLike) {
            this.article.likeNum--
          } else {
            this.article.likeNum++
          }
          this.article.isLike = !this.article.isLike
        }

        // 设置一个5秒的防抖
        this.likeDebounce = true
        setTimeout(() => {
          this.likeDebounce = false
        }, 5000)
      })
    },
    /**
     * 分享
     */
    toggleShareMenu() {
      if (this.isPreviewMode) return;
      this.showShareMenu = !this.showShareMenu
    },
    /**
     * 关闭分享
     */
    closeShareMenu() {
      this.showShareMenu = false
    },
    /**
     * 分享到QQ
     */
    shareToQQ() {
      const url = encodeURIComponent(this.currentUrl)
      const title = encodeURIComponent(this.article.title)
      const summary = encodeURIComponent(this.article.summary || '')
      const pic = encodeURIComponent(this.article.avatar || '')
      window.open(
        `https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&summary=${summary}&pics=${pic}`,
        "renren-share", "width=490,height=700");
      this.closeShareMenu()
    },
    /**
     * 分享到QQ空间
     */
    shareToQzone() {
      const url = encodeURIComponent(this.currentUrl)
      const title = encodeURIComponent(this.article.title)
      const summary = encodeURIComponent(this.article.summary || '')
      const pic = encodeURIComponent(this.article.avatar || '')
      window.open(
        `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=${url}&title=${title}&summary=${summary}&pics=${pic}`,
        "renren-share", "width=490,height=700"
      )

      this.closeShareMenu()
    },
    /**
     * 分享到微博
     */
    shareToWeibo() {
      const url = encodeURIComponent(this.currentUrl)
      const title = encodeURIComponent(`${this.article.title} - KingCola-ICG Blog`)
      window.open(
        `http://service.weibo.com/share/share.php?url=${url}&title=${title}`,
        "renren-share", "width=490,height=700")
      this.closeShareMenu()
    },
    /**
     * 分享到微信
     */
    shareToWechat() {
      // 由于微信分享需要使用微信SDK，这样简单处理
      window.open(
        `https://api.pwmqr.com/qrcode/create/?url=${window.location.href}`,
        "renren-share", "width=490,height=700");
      this.closeShareMenu()
    },
    /**
     * 复制链接
     */
    async copyLink() {
      try {
        await navigator.clipboard.writeText(this.currentUrl)
        this.$message.success('链接已复制到剪贴板')
      } catch (err) {
        this.$message.error('复制失败，请手动复制')
      }
      this.closeShareMenu()
    },
    /**
     * 跳转到文章
     */
    goToArticle(id) {
      this.$router.push(`/article/${id}`)
    },
    /**
     * 更新阅读进度
     */
    handleScroll() {
      const docEl = document.documentElement
      const winHeight = window.innerHeight
      const docHeight = docEl.scrollHeight - winHeight
      const scrollTop = window.scrollY || docEl.scrollTop
      this.readProgress = Math.round((scrollTop / docHeight) * 100)
    },
    /**
     * 滚动到标题
     */
    scrollToHeading(id) {
      const element = document.getElementById(id)
      if (element) {
        const header = document.querySelector('.site-header')
        const headerHeight = header ? header.offsetHeight : 0
        const targetPosition = element.offsetTop - headerHeight - 20

        if (this.isPreviewMode) {
          // 预览模式下，滚动容器是 .preview-container
          const container = document.querySelector('.preview-container');
          if (container) {
            container.scrollTo({
              top: targetPosition,
              behavior: 'smooth'
            });
          }
          this.activeHeading = id;
          return;
        }

        // 立即更新激活的标题ID，并设置程序化滚动标志
        this.activeHeading = id;
        this.isProgrammaticScroll = true;

        // 停止自动滚动(如果正在进行)
        if (this.autoScrollInterval) {
          this.stopAutoScroll();
        }

        // 滚动到目标位置
        window.scrollTo({
          top: targetPosition,
          behavior: 'smooth'
        })

        // 查找当前点击的标题在目录中的索引
        const activeIndex = this.tocItems.findIndex(item => item.id === id);
        if (activeIndex >= 0) {
          this.scrollActiveTocItemIntoView(activeIndex);
        }

        // 在滚动动画结束后，重置标志位
        setTimeout(() => {
          this.isProgrammaticScroll = false;
        }, 1000); // 1秒的延迟，足以完成大部分滚动动画
      }
    },
    /**
     * 更新激活标题
     */
    updateActiveHeading() {
      // 如果是程序化滚动，则不执行此函数，以防止覆盖点击效果
      if (this.isProgrammaticScroll) {
        return;
      }

      this.handleScroll()
      const headings = this.tocItems.map(item => document.getElementById(item.id))
      const header = document.querySelector('.site-header')
      const headerHeight = header ? header.offsetHeight : 0
      let foundActive = false
      let activeIndex = 0;
      let closestHeading = null;
      let closestDistance = Infinity;

      // 使用精确算法找到最接近视口顶部的标题
      for (let i = 0; i < headings.length; i++) {
        const heading = headings[i]
        if (!heading) continue;

        // 计算标题到视口顶部+偏移的距离
        const distance = Math.abs(heading.getBoundingClientRect().top - (headerHeight + 40));

        // 在视口中的标题（考虑一个范围）
        const isInViewport = heading.getBoundingClientRect().top <= headerHeight + 100 &&
          heading.getBoundingClientRect().top >= headerHeight - 20;

        // 优先使用在视口中的标题，否则使用最接近的
        if (isInViewport) {
          if (distance < closestDistance) {
            closestDistance = distance;
            closestHeading = heading;
            activeIndex = i;
            foundActive = true;
          }
        } else if (!foundActive && distance < closestDistance) {
          // 如果没有在视口内的标题，保存最接近的一个
          closestDistance = distance;
          closestHeading = heading;
          activeIndex = i;
        }
      }

      // 更新激活的标题
      if (closestHeading) {
        // 只有在新激活标题与当前不同时才更新，避免不必要的重绘
        if (this.activeHeading !== closestHeading.id) {
          this.activeHeading = closestHeading.id;

          // 滚动目录以确保激活项可见
          this.$nextTick(() => {
            this.scrollActiveTocItemIntoView(activeIndex);
          });
        }
      } else if (headings.length > 0 && headings[0]) {
        this.activeHeading = headings[0].id;
        activeIndex = 0;

        // 滚动目录以确保激活项可见
        this.$nextTick(() => {
          this.scrollActiveTocItemIntoView(activeIndex);
        });
      }
    },

    /**
     * 滚动目录项到可视区域
     */
    scrollActiveTocItemIntoView(activeIndex) {
      const tocContent = this.$refs.tocContent;
      if (!tocContent) return;

      const activeItem = tocContent.querySelector('.toc-item.active');
      if (activeItem) {
        // 计算目标滚动位置
        const itemOffsetTop = activeItem.offsetTop;
        const containerHeight = tocContent.clientHeight;
        const itemHeight = activeItem.clientHeight;
        const currentScroll = tocContent.scrollTop;

        // 目标应该在容器的中间位置
        const targetScroll = itemOffsetTop - (containerHeight / 2) + (itemHeight / 2);

        // 只有当项目不在可视区域的中间部分时才滚动
        const visibleStart = currentScroll + containerHeight * 0.3;
        const visibleEnd = currentScroll + containerHeight * 0.7;

        if (itemOffsetTop < visibleStart || itemOffsetTop > visibleEnd) {
          tocContent.scrollTo({
            top: targetScroll,
            behavior: 'smooth'
          });
        }
      }
    },
    /**
     * 添加复制按钮
     */
    addCopyButtons() {
      if (!this.$el) return;
      const codeBlocks = this.$el.querySelectorAll('.article-content pre')
      if (!codeBlocks.length) return

      codeBlocks.forEach(pre => {
        // 检查是否已经添加过复制按钮
        if (pre.querySelector('.code-header')) return

        // 创建复制按钮容器
        const buttonWrapper = document.createElement('div')
        buttonWrapper.className = 'code-header'

        // 创建复制按钮
        const copyButton = document.createElement('button')
        copyButton.className = 'copy-button'
        copyButton.innerHTML = '<i class="fas fa-copy"></i> 复制'
        copyButton.title = '复制代码'

        // 添加点击事件
        copyButton.addEventListener('click', async () => {
          try {
            const code = pre.querySelector('code')
            await navigator.clipboard.writeText(code.textContent)
            copyButton.innerHTML = '<i class="fas fa-check"></i> 已复制'
            copyButton.classList.add('copied')
            setTimeout(() => {
              copyButton.innerHTML = '<i class="fas fa-copy"></i> 复制'
              copyButton.classList.remove('copied')
            }, 2000)
            this.$message.success('复制成功')
          } catch (err) {
            this.$message.error('复制失败，请手动复制')
          }
        })

        // 将按钮添加到代码块
        buttonWrapper.appendChild(copyButton)
        pre.appendChild(buttonWrapper)
      })
    },
    /**
     * 初始化图片预览
     */
    initImagePreview() {
      if (!this.$el) return;
      // 使用 IntersectionObserver 监听图片
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const img = entry.target
            const actualSrc = img.getAttribute('data-src')
            if (actualSrc) {
              // 创建一个新的图片对象来预加载
              const tempImg = new Image()
              tempImg.onload = () => {
                img.src = actualSrc
                img.classList.add('loaded')
              }
              tempImg.onerror = () => {
                // img.src = 'https://img.shiyit.com/base/mojian/img-error.jpg'
                img.src = 'https://img.picui.cn/free/2025/04/01/67ebabede9be6.jpg'
                img.classList.add('error')
              }
              tempImg.src = actualSrc
              img.removeAttribute('data-src')
              observer.unobserve(img)
            }
          }
        })
      }, {
        rootMargin: '50px 0px',
        threshold: 0.1
      })

      // 监听所有带有 lazy-image 类的图片
      setTimeout(() => {
        const lazyImages = this.$el.querySelectorAll('.lazy-image')
        lazyImages.forEach(img => {
          observer.observe(img)
        })

        // 收集所有图片URL用于预览
        this.images = Array.from(this.$el.querySelectorAll('.article-content img')).map(img =>
          img.getAttribute('data-src') || img.getAttribute('src')
        )

        // 为图片添加点击事件
        this.$el.querySelectorAll('.article-content img').forEach(img => {
          img.style.cursor = 'zoom-in'
          img.addEventListener('click', this.handleImageClick)
        })
      }, 200)
    },
    /**
     * 处理图片点击
     */
    handleImageClick(e) {
      const img = e.target
      if (img.tagName === 'IMG') {
        this.$refs.imagePreview.show(this.images, this.images.indexOf(img.src))
      }
    },
    toggleDislike() {
      // 实现点踩功能
      if (this.likeDebounce) {
        this.$message.warning('请于 5 秒后再试')
        return
      }
      // TODO: 调用点踩 API
      this.$message.success(this.article.isDislike ? '取消点踩成功' : '点踩成功')
      if (this.article.isDislike) {
        this.article.dislikeNum--
      } else {
        this.article.dislikeNum++
      }
      this.article.isDislike = !this.article.isDislike
      this.likeDebounce = true
      setTimeout(() => {
        this.likeDebounce = false
      }, 5000)
    },
    toggleFavorite() {
      if (this.isPreviewMode) {
        this.$message.info('预览模式下无法操作');
        return;
      }
      this.$message.warning('暂未开放')
      return
      // 实现收藏功能
      this.$message.success(this.article.isFavorite ? '取消收藏成功' : '收藏成功')
      if (this.article.isFavorite) {
        this.article.favoriteNum--
      } else {
        this.article.favoriteNum++
      }
      this.article.isFavorite = !this.article.isFavorite
    },
    toggleSidebar() {
      if (this.isPreviewMode) return;
      this.showSidebar = !this.showSidebar
      // 等待 DOM 更新后重新计算操作栏位置
      this.$nextTick(() => {
        this.updateActionBarPosition()
      })
    },
    scrollToComments() {
      if (!this.$el) return;
      const commentsSection = this.$el.querySelector('.comment-section')
      if (commentsSection) {
        commentsSection.scrollIntoView({ behavior: 'smooth' })
      }
    },
    updateActionBarPosition() {
      const articleBox = document.getElementById("articleBox")
      if (articleBox) {
        const rect = articleBox.getBoundingClientRect()
        this.actionBarLeft = (rect.left - 95) + 'px'
      }
    },
    /**
     * 初始化代码块的展开/折叠功能
     */
    initializeCodeBlocks() {
      if (!this.$el) return;
      const codeBlocks = this.$el.querySelectorAll('.article-content pre')
      codeBlocks.forEach((pre, index) => {
        // 移除可能存在的旧按钮
        const oldButton = pre.querySelector('.expand-button')
        if (oldButton) {
          oldButton.remove()
        }

        // 获取代码块的实际高度
        const actualHeight = pre.scrollHeight

        if (actualHeight > 500) {
          // 添加折叠类
          pre.classList.add('collapsed')

          // 创建展开按钮
          const expandButton = document.createElement('button')
          expandButton.className = 'expand-button'
          expandButton.innerHTML = '<i class="fas fa-chevron-down"></i>展开代码'

          // 添加点击事件
          expandButton.onclick = (e) => {
            e.stopPropagation()
            const isCollapsed = pre.classList.contains('collapsed')
            if (isCollapsed) {
              pre.classList.remove('collapsed')
              expandButton.innerHTML = '<i class="fas fa-chevron-up"></i>收起代码'
              this.collapsedCodeBlocks.delete(index)
            } else {
              pre.classList.add('collapsed')
              expandButton.innerHTML = '<i class="fas fa-chevron-down"></i>展开代码'
              this.collapsedCodeBlocks.add(index)
            }
          }

          pre.appendChild(expandButton)
        }
      })
    },
    /**
     * 添加行号
     */
    addLineNumbers() {
      if (!this.$el) return;
      const codeBlocks = this.$el.querySelectorAll('.article-content pre code')
      codeBlocks.forEach((code) => {
        const pre = code.parentElement

        // 检查是否已添加行号
        if (!pre.querySelector('.line-numbers')) {
          const lines = code.textContent.split('\n').length
          const lineNumbers = document.createElement('div')
          lineNumbers.className = 'line-numbers'

          for (let i = 1; i <= lines; i++) {
            const span = document.createElement('span')
            span.textContent = i
            lineNumbers.appendChild(span)
          }

          pre.insertBefore(lineNumbers, code)
        }
      })
    },
    /**
     * 获取预览内容
     */
    getPreviewContent(content) {
      // 返回内容的前300个字符，并确保HTML标签完整
      const div = document.createElement('div')
      div.innerHTML = content
      const text = div.textContent || div.innerText
      return text.substring(0, 300) + '...'
    },
    /**
     * 处理评论添加
     */
    handleCommentAdded() {
      if (this.isPreviewMode) return;
      this.article.commentNum = (this.article.commentNum || 0) + 1;
      this.article.isCommented = true; // 标记为已评论
      // 如果是评论解锁，则刷新文章
      if (this.article.readType === 1 || this.article.readType === 3) {
        this.getArticle();
      }
    },

    /**
     * 处理评论删除
     */
    handleCommentDeleted() {
      this.article.commentNum = Math.max((this.article.commentNum || 0) - 1, 0);
    },

    /**
     * 处理复制事件，添加版权信息
     */
    handleCopy(event) {
      // 仅在文章内容区域生效
      const articleContent = this.$el.querySelector('.article-content');
      if (!articleContent || !articleContent.contains(window.getSelection().anchorNode)) {
        return;
      }

      const selection = window.getSelection();
      // 如果复制的文本很短，则不添加版权信息
      if (selection.toString().length < 10) {
        return;
      }

      event.preventDefault();

      const articleUrl = window.location.href;
      const copyrightInfo = [
        '\n',
        '--------------------------------',
        `版权声明：本文为「KingCola-ICG Blog」的原创文章，遵循 CC 4.0 BY-NC-SA 版权协议。`,
        `作者：${this.article.nickname}`,
        `原文链接：${articleUrl}`,
        '转载请附上原文出处链接及本声明。'
      ].join('\n');

      const textToCopy = selection.toString() + copyrightInfo;

      if (event.clipboardData) {
        event.clipboardData.setData('text/plain', textToCopy);
      } else if (window.clipboardData) {
        window.clipboardData.setData('text', textToCopy);
      }

      this.$message.success({
        message: '复制成功，已自动附加版权声明！',
        duration: 3000
      });
    },

    startTransition(element) {
      element.style.height = 'auto'
      const height = element.scrollHeight
      element.style.height = '0px'
      // 触发回流
      element.offsetHeight
      element.style.height = height + 'px'
    },
    endTransition(element) {
      element.style.height = element.scrollHeight + 'px'
      // 触发回流
      element.offsetHeight
      element.style.height = '0px'
    },
    /**
     * 切换自动滚动状态
     */
    toggleAutoScroll() {
      if (this.isPreviewMode) return;
      if (this.isAutoScrolling) {
        this.stopAutoScroll();
      } else {
        this.startAutoScroll();
      }
    },

    /**
     * 开始自动滚动
     */
    startAutoScroll() {
      if (this.autoScrollInterval) {
        return;
      }

      this.isAutoScrolling = true;
      // 每25毫秒滚动一次，以实现平滑效果
      this.autoScrollInterval = setInterval(() => {
        window.scrollBy(0, this.autoScrollSpeed);

        // 如果滚动到底部，停止自动滚动
        const scrollTop = window.scrollY || document.documentElement.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight;
        const clientHeight = document.documentElement.clientHeight;

        if (scrollTop + clientHeight >= scrollHeight - 50) {
          this.stopAutoScroll();
        }
      }, 25);
    },

    /**
     * 停止自动滚动
     */
    stopAutoScroll() {
      if (this.autoScrollInterval) {
        clearInterval(this.autoScrollInterval);
        this.autoScrollInterval = null;
      }
      this.isAutoScrolling = false;
    },

    /**
     * 设置滚动速度
     */
    setScrollSpeed(speed) {
      this.autoScrollSpeed = speed;

      // 如果正在自动滚动中，需要重新启动以应用新速度
      if (this.isAutoScrolling) {
        this.stopAutoScroll();
        this.startAutoScroll();
      }
    },

    /**
     * 处理速度滑块变化
     */
    onSpeedChange(value) {
      this.autoScrollSpeed = value;

      // 如果正在自动滚动中，需要重新启动以应用新速度
      if (this.isAutoScrolling) {
        this.stopAutoScroll();
        this.startAutoScroll();
      }
    },

    /**
     * 处理文章内容中的链接
     */
    processArticleLinks() {
      try {
        if (!this.$el) return;
        // 仅处理文章内容区域的链接，避免处理整个页面
        if (this.$processPageLinks) {
          this.$processPageLinks({
            selector: '.article-content a', // 只处理文章内容区域的链接
            exclude: [
              '.no-jump',
              '.nav-link',
              '[href^="javascript:"]',
              '[href^="#"]' // 排除锚点链接
            ]
          });
          console.log('文章内容链接已处理，已启用外部链接跳转提示');
        } else {
          console.warn('processPageLinks函数不可用，无法处理文章内容中的链接');
        }

        // 特别处理转载来源链接
        if (!this.article.isOriginal && this.article.originalUrl) {
          const originalLinkElements = this.$el.querySelectorAll('.notice-item a[href="' + this.article.originalUrl + '"]');
          originalLinkElements.forEach(link => {
            // 移除可能已有的事件监听器
            link.removeEventListener('click', this.handleOriginalLinkClick);
            // 添加新的事件监听器
            link.addEventListener('click', this.handleOriginalLinkClick);
          });
        }
      } catch (error) {
        console.error('处理文章链接时出错:', error);
      }
    },

    /**
     * 处理原文链接点击
     */
    handleOriginalLinkClick(event) {
      event.preventDefault();
      const url = event.currentTarget.getAttribute('href');

      if (url && this.$linkJumpPrompt && typeof this.$linkJumpPrompt.show === 'function') {
        this.$linkJumpPrompt.show(url);
      } else {
        // 如果没有找到链接跳转提示组件，则直接在新窗口中打开链接
        window.open(url, '_blank', 'noopener,noreferrer');
      }
    },
  },
  async created() {
    // 如果不是预览模式，则正常获取文章
    if (!this.previewData) {
      await this.getArticle()
    }
    // 非预览模式下才监听resize
    if (!this.isPreviewMode) {
      window.addEventListener('resize', this.updateActionBarPosition)
    }
  },
  mounted() {
    if (!this.isPreviewMode) {
      window.addEventListener('scroll', this.updateActiveHeading)
      window.addEventListener('resize', this.updateActionBarPosition)
    }
    this.$el.addEventListener('copy', this.handleCopy);
    this.$nextTick(() => {
      // 预览模式下的初始化由父组件通过 triggerInitialization 调用
      if (!this.previewData) {
        this.initImagePreview()
      }

      // 确保在DOM更新后检查作者状态和内容显示
      if (this.article.status === 0) {
        console.log('DOM更新后再次检查 - 审核状态文章:', {
          isAuthor: this.isAuthor,
          contentLength: this.article.content ? this.article.content.length : 0,
          status: this.article.status
        });
      }

      // 文章内容加载后处理链接
      if (this.article.content && !this.article.draftMode) {
        setTimeout(() => {
          this.processArticleLinks()
        }, 300)
      }
    })
    // 初始显示操作栏，并设置定时器
    this.isActionBarHidden = false;
    this.resetActionBarTimer();
  },
  beforeDestroy() {
    if (!this.isPreviewMode) {
      window.removeEventListener('scroll', this.updateActiveHeading)
      window.removeEventListener('resize', this.updateActionBarPosition)
    }
    this.$el.removeEventListener('copy', this.handleCopy);
    // 清理图片点击事件监听器
    if (this.$el) {
      const images = this.$el.querySelectorAll('.article-content img')
      images.forEach(img => {
        img.removeEventListener('click', this.handleImageClick)
      })
    }
    // 清除定时器
    if (this.actionBarTimer) {
      clearTimeout(this.actionBarTimer);
    }
    // 清除自动滚动定时器
    this.stopAutoScroll();
  },
  watch: {
    // 监听路由参数变化
    '$route'(to, from) {
      if (to.params.id !== from.params.id && !this.previewData) {
        // 重新获取文章数据
        this.getArticle()
      }
    },
    'article.content'(newVal) {
      if (newVal && !this.previewData) {
        this.getArticle()
      }
    },
    // 监听预览数据变化，仅更新数据，不执行DOM操作
    previewData: {
      handler(newData) {
        if (newData) {
          this.loading = true;
          const defaultArticle = {
            title: '文章加载失败',
            category: { name: '未分类' },
            tags: [],
            content: '',
            nickname: '未知作者',
            avatar: '',
            createTime: '',
            updateTime: '',
            quantity: 0,
            commentNum: 0,
            likeNum: 0,
            isLike: false,
            isCommented: false,
            isOriginal: 1,
            originalUrl: '',
            aiDescribe: ''
          };
          this.article = Object.assign({}, defaultArticle, newData);
          this.article.content = newData.content ? this.addLazyLoadToImages(newData.content) : '';
          this.loading = false;
        }
      },
      deep: true,
      immediate: true,
    },
    // 监听文章详情数据变化，处理外部链接
    article: {
      deep: true,
      handler() {
        // 等待DOM更新后处理链接
        this.$nextTick(() => {
          // 确保文章已加载并且不是草稿模式
          if (this.article.content && !this.article.draftMode) {
            setTimeout(() => {
              this.processArticleLinks()
            }, 300)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/* 预览模式下的只读样式 */
.is-preview-mode {

  // 禁用所有交互事件
  .action-bar-container,
  .article-actions,
  .comment-section,
  .author-avatar,
  .author-meta,
  .toc-item,
  .toc-controls button,
  .article-content a,
  .tags-section .tag-item,
  .copyright-notice a {
    pointer-events: none;
    cursor: not-allowed;
  }

  // 添加灰度效果，但保持可读性
  .action-bar-container,
  .article-actions,
  .toc-controls,
  .comment-section {
    filter: grayscale(80%);
    opacity: 0.7;
  }

  // 隐藏不需要的元素
  .share-dropdown .share-menu {
    display: none !important;
  }

  // 特别处理评论区，给一个遮罩提示
  .comment-section {
    position: relative;

    &::after {
      content: '预览模式下无法评论';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(var(--card-bg-rgb), 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2em;
      color: var(--text-secondary);
      border-radius: $border-radius-lg;
      z-index: 10;
    }
  }
}

/* 骨架屏样式 */
.article-skeleton {
  max-width: 1300px;
  margin: 0 auto;
  padding: $spacing-lg;

  .skeleton-wrapper {
    animation: fade-in 0.5s ease-in-out;
  }

  .skeleton-cover-container {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: -100px;
    z-index: 1;
    border-radius: $border-radius-lg;
  }

  .skeleton-cover {
    width: 100%;
    height: 100%;
    background: var(--hover-bg);
    border-radius: $border-radius-lg;
  }

  .skeleton-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: $spacing-md * 2;
    position: relative;
    z-index: 2;

    @include responsive(lg) {
      grid-template-columns: 1fr;
    }
  }

  .skeleton-main {
    background: var(--card-bg);
    border-radius: $border-radius-lg;
    padding: $spacing-lg * 2;
    box-shadow: $shadow-md;
    overflow: hidden;
  }

  .skeleton-header {
    margin-bottom: $spacing-xl;
    position: relative;
  }

  .skeleton-title {
    height: 36px;
    width: 70%;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    margin-bottom: $spacing-md;
  }

  .skeleton-subtitle {
    height: 24px;
    width: 40%;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    margin-bottom: $spacing-xl;
    opacity: 0.7;
  }

  .skeleton-author {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: $spacing-md 0;
    padding-bottom: $spacing-md;
    border-bottom: 1px solid rgba(var(--border-color), 0.1);
  }

  .skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--hover-bg);
  }

  .skeleton-author-info {
    flex: 1;
  }

  .skeleton-author-name {
    height: 20px;
    width: 120px;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    margin-bottom: $spacing-sm;
  }

  .skeleton-meta {
    height: 16px;
    width: 200px;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    opacity: 0.7;
  }

  .skeleton-stats {
    display: flex;
    gap: $spacing-md;
    margin-top: $spacing-md;
  }

  .skeleton-stat-item {
    height: 24px;
    width: 80px;
    border-radius: 20px;
    background: var(--hover-bg);
  }

  .skeleton-summary {
    margin: $spacing-lg 0;
    padding: $spacing-md;
    background: rgba(var(--hover-bg), 0.3);
    border-radius: $border-radius-md;
  }

  .skeleton-summary-header {
    height: 20px;
    width: 100px;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    margin-bottom: $spacing-sm;
  }

  .skeleton-summary-content {
    height: 50px;
    width: 100%;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    opacity: 0.7;
  }

  .skeleton-content {
    padding: $spacing-md 0;
  }

  .skeleton-paragraph {
    height: 16px;
    width: 100%;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    margin-bottom: $spacing-md;
  }

  .skeleton-subheading {
    height: 28px;
    width: 50%;
    border-radius: $border-radius-sm;
    background: var(--hover-bg);
    margin: $spacing-lg 0 $spacing-md;
  }

  .skeleton-image {
    height: 200px;
    width: 100%;
    border-radius: $border-radius-md;
    background: var(--hover-bg);
    margin: $spacing-lg 0;
  }

  .skeleton-code {
    height: 120px;
    width: 100%;
    border-radius: $border-radius-md;
    background: var(--hover-bg);
    margin: $spacing-lg 0;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 30px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: $border-radius-md $border-radius-md 0 0;
    }
  }

  .skeleton-footer {
    margin-top: $spacing-xl;
    padding-top: $spacing-lg;
    border-top: 1px solid var(--border-color);
  }

  .skeleton-tags {
    display: flex;
    flex-wrap: wrap;
    gap: $spacing-sm;
    margin-bottom: $spacing-lg;
  }

  .skeleton-tag {
    height: 28px;
    width: 80px;
    border-radius: 20px;
    background: var(--hover-bg);
  }

  .skeleton-actions {
    display: flex;
    justify-content: center;
    gap: $spacing-lg;
  }

  .skeleton-action-btn {
    height: 36px;
    width: 120px;
    border-radius: 20px;
    background: var(--hover-bg);
  }

  .skeleton-sidebar {
    padding-top: 130px;

    @include responsive(lg) {
      display: none;
    }

    .skeleton-sidebar-header {
      height: 40px;
      border-radius: $border-radius-md $border-radius-md 0 0;
      background: var(--hover-bg);
      margin-bottom: $spacing-md;
    }

    .skeleton-toc {
      padding: $spacing-md;
      background: var(--card-bg);
      border-radius: $border-radius-md;
      box-shadow: $shadow-sm;
    }

    .skeleton-toc-item {
      height: 16px;
      width: 100%;
      border-radius: $border-radius-sm;
      background: var(--hover-bg);
      margin-bottom: $spacing-md;

      &:nth-child(odd) {
        opacity: 0.7;
      }
    }
  }

  /* 闪光效果 */
  .shine {
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(to right,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent);
      animation: shine 2s infinite;
    }
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }

  40% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 操作栏容器 */
.action-bar-container {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
}

/* 触发按钮 */
.action-bar-trigger {
  width: 24px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0 8px 8px 0;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: #ffffff;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    width: 28px;
  }

  i {
    font-size: 16px;
    color: #666;
  }

  /* 移动端触发按钮样式 */
  @include responsive(lg) {
    width: 22px;
    height: 50px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);

    i {
      font-size: 14px;
    }

    &::after {
      content: '';
      position: absolute;
      top: -20px;
      left: 0;
      width: 100%;
      height: 20px;
      background: transparent;
    }

    &::before {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 0;
      width: 100%;
      height: 20px;
      background: transparent;
    }
  }

  /* 黑夜模式 */
  @media (prefers-color-scheme: dark) {
    background: rgba(47, 47, 47, 0.9);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);

    &:hover {
      background: #2f2f2f;
    }

    i {
      color: #bbb;
    }
  }

  /* 如果使用了自定义的暗色模式类 */
  .dark-mode & {
    background: rgba(47, 47, 47, 0.9);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);

    &:hover {
      background: #2f2f2f;
    }

    i {
      color: #bbb;
    }
  }
}

/* 浮动操作栏 */
.floating-action-bar {
  position: relative;
  left: 20px;
  /* 增加与左侧的距离 */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.8);

  /* 黑夜模式 */
  @media (prefers-color-scheme: dark) {
    background: rgba(47, 47, 47, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(60, 60, 60, 0.8);
  }

  /* 如果使用了自定义的暗色模式类 */
  .dark-mode & {
    background: rgba(47, 47, 47, 0.95);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(60, 60, 60, 0.8);
  }

  /* 移动端样式 */
  @include responsive(lg) {
    left: 0;
    padding: 12px 6px;
  }

  /* 更小屏幕的适配 */
  @include responsive(sm) {
    padding: 10px 4px;
  }
}

/* 操作栏头部 */
.action-bar-header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;

  .action-bar-close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s;

    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }

    i {
      font-size: 14px;
      color: #999;
    }

    /* 黑夜模式 */
    @media (prefers-color-scheme: dark) {
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      i {
        color: #bbb;
      }
    }

    /* 如果使用了自定义的暗色模式类 */
    .dark-mode & {
      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      i {
        color: #bbb;
      }
    }
  }
}

/* 操作栏内容 */
.action-bar-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 操作项 */
.action-item {
  position: relative;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    transform: scale(1.1);
  }
}

/* 操作按钮 */
.action-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  i {
    font-size: 18px;
    color: #606266;
    transition: all 0.3s;

    &.active {
      color: #409EFF;
    }
  }

  &:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    i {
      color: #409EFF;
    }
  }

  /* 黑夜模式 */
  @media (prefers-color-scheme: dark) {
    background: #363636;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    i {
      color: #bbb;

      &.active {
        color: #79bbff;
      }
    }

    &:hover {
      background: #404040;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

      i {
        color: #79bbff;
      }
    }
  }

  /* 如果使用了自定义的暗色模式类 */
  .dark-mode & {
    background: #363636;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

    i {
      color: #bbb;

      &.active {
        color: #79bbff;
      }
    }

    &:hover {
      background: #404040;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

      i {
        color: #79bbff;
      }
    }
  }
}

/* 修改打赏弹出框的样式 */
.reward-item {
  position: relative;

  &:hover .reward-popup {
    opacity: 1;
    transform: translateX(20px) scale(1);
    pointer-events: all;
  }

  .reward-popup {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateX(0) translateY(-50%) scale(0.9);
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
    z-index: 10;
    width: 300px;
    /* 固定宽度 */
    max-width: 80vw;
    /* 限制最大宽度 */
    overflow: hidden;
    /* 防止内容溢出 */

    /* 移动端打赏弹出框样式 */
    @include responsive(lg) {
      left: 100%;
      width: 260px;
      padding: 12px;

      .reward-content {
        flex-direction: column;
        gap: 16px;
      }
    }

    @include responsive(sm) {
      width: 220px;
      max-width: 70vw;
      padding: 10px;

      .reward-title {
        font-size: 14px;
        margin-bottom: 8px;
      }
    }

    .reward-title {
      font-size: 16px;
      font-weight: 500;
      text-align: center;
      margin-bottom: 12px;
      color: #303133;
    }

    .reward-content {
      display: flex;
      justify-content: space-around;
      /* 均匀分布 */
      gap: 12px;
      /* 添加间距 */
      margin-bottom: 12px;
    }

    .reward-qr-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 120px;
      /* 固定宽度 */

      .reward-qr {
        width: 100%;
        /* 使用100%宽度 */
        height: auto;
        /* 自动高度 */
        aspect-ratio: 1/1;
        /* 保持1:1比例 */
        object-fit: contain;
        /* 确保图片完整显示 */
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background-color: white;
        padding: 5px;
        box-sizing: border-box;
      }

      .reward-label {
        margin-top: 8px;
        font-size: 12px;
        color: #909399;
      }
    }

    .reward-text {
      text-align: center;
      font-size: 14px;
      color: #606266;
      margin-top: 8px;
    }

    /* 黑夜模式 */
    @media (prefers-color-scheme: dark) {
      background: #2f2f2f;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

      .reward-title {
        color: #e0e0e0;
      }

      .reward-qr-container .reward-qr {
        border-color: rgba(255, 255, 255, 0.1);
        background-color: #f5f5f5;
        /* 保持二维码背景为浅色以确保可扫描 */
      }

      .reward-qr-container .reward-label {
        color: #bbb;
      }

      .reward-text {
        color: #bbb;
      }
    }

    /* 如果使用了自定义的暗色模式类 */
    .dark-mode & {
      background: #2f2f2f;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

      .reward-title {
        color: #e0e0e0;
      }

      .reward-qr-container .reward-qr {
        border-color: rgba(255, 255, 255, 0.1);
        background-color: #f5f5f5;
      }

      .reward-qr-container .reward-label {
        color: #bbb;
      }

      .reward-text {
        color: #bbb;
      }
    }
  }
}

/* 徽章样式覆盖 */
:deep(.el-badge__content) {
  border: none;
  font-weight: normal;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
}

/* 动画效果 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(-20px);
}

.article-page {
  max-width: 1300px;
  margin: 0 auto;
  padding: $spacing-lg;
  position: relative;

  @include responsive(lg) {
    padding: $spacing-sm;
  }
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: $spacing-md * 2;
  transition: all 0.3s ease;
  position: relative;
  min-height: 100vh;

  &.center {
    grid-template-columns: 1fr;
    max-width: 1100px;
    margin: 0 auto;
  }

  @include responsive(lg) {
    grid-template-columns: 1fr;
    gap: $spacing-lg;
    padding: 0;
  }
}

.article-main {
  background: var(--card-bg);
  border-radius: $border-radius-lg;
  box-shadow: $shadow-md;
  overflow: hidden;
}

.article-header {
  padding: $spacing-lg $spacing-xl;
  position: relative;
  border-bottom: 1px solid var(--border-color);
  background: var(--card-bg);

  /* 添加微妙的背景纹理 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 0;
  }

  .article-status-alert {
    background: rgba(255, 232, 189, 0.6);
    border-left: 4px solid #ff9800;
    padding: 8px 16px;
    margin: 8px 0 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;

    i {
      color: #ff9800;
      font-size: 1.1em;
    }

    span {
      color: #333;
    }

    .status-tip {
      font-style: italic;
      margin-left: auto;
      font-size: 0.9em;
      color: #666;
    }
  }

  .article-title {
    color: var(--text-primary);
    font-size: 2em;
    line-height: 1.4;
    margin-bottom: $spacing-lg;
    text-align: left;
    position: relative;
    z-index: 1;
    font-weight: 600;

    /* 添加优雅的标题下划线 */
    &::after {
      content: '';
      display: block;
      width: 80px;
      height: 4px;
      margin-top: $spacing-sm;
      background: linear-gradient(to right, $primary, rgba($primary, 0.2));
      border-radius: $border-radius-sm;
    }
  }

  .article-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: $spacing-md;
    position: relative;
    z-index: 1;

    .author-info {
      display: flex;
      align-items: center;
      gap: $spacing-md;

      .author-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba($primary, 0.3);
        padding: 2px;
        background: var(--card-bg);
        transition: all 0.5s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        cursor: pointer;

        &:hover {
          transform: rotate(360deg);
          border-color: $primary;
          box-shadow: 0 3px 15px rgba($primary, 0.2);
        }
      }

      .author-meta {
        display: flex;
        flex-direction: column;
        gap: $spacing-xs;
        cursor: pointer;

        .author-name {
          color: $primary;
          font-weight: 600;
          font-size: 1.1em;
          display: flex;
          align-items: center;
          gap: $spacing-xs;

          /* 添加认证标识 */
          &::after {
            content: '✓';
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            background: $primary;
            color: white;
            border-radius: 50%;
            font-size: 10px;
            opacity: 0.8;
          }
        }

        .post-meta {
          display: flex;
          align-items: center;
          gap: $spacing-sm;
          color: var(--text-secondary);
          font-size: 0.9em;

          i {
            color: $primary;
            margin-right: 4px;
          }

          .meta-divider {
            color: var(--text-secondary);
            opacity: 0.5;
          }

          .category {
            color: $primary;
            background: rgba($primary, 0.05);
            border-radius: 12px;
            padding: 2px 8px;
            transition: all 0.3s ease;

            &:hover {
              background: rgba($primary, 0.1);
              transform: translateY(-1px);
            }
          }
        }
      }
    }

    .article-stats {
      display: flex;
      align-items: center;
      gap: $spacing-lg;
      background: var(--hover-bg);
      padding: $spacing-sm $spacing-md;
      border-radius: $border-radius-lg;
      border: 1px solid var(--border-color);

      .stat-item {
        display: flex;
        align-items: center;
        gap: $spacing-xs;
        color: var(--text-secondary);
        font-size: 0.95em;

        i {
          color: $primary;
          font-size: 1.1em;
        }
      }
    }

    .article-status {
      margin-top: $spacing-sm;
      display: flex;
      align-items: center;
      gap: $spacing-sm;

      .status-tip {
        color: var(--text-secondary);
        font-size: 0.9em;
      }
    }
  }
}

.article-content {
  padding: 0 $spacing-md * 2;
  line-height: 1.8;
  color: var(--text-primary);
  font-size: 1.1em;

  :deep(h2) {
    font-size: 1.8em;
    margin: $spacing-xl 0 $spacing-lg;
    padding-bottom: $spacing-sm;
    border-bottom: 2px solid rgba($primary, 0.1);
    position: relative;
    color: var(--text-primary);

    &::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 50px;
      height: 2px;
      background: $primary;
    }
  }

  :deep(h3) {
    font-size: 1.4em;
    margin: $spacing-lg 0;
    color: var(--text-primary);
    position: relative;
    padding-left: $spacing-lg;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 20px;
      background: $primary;
      border-radius: $border-radius-sm;
    }
  }

  :deep(h4) {
    font-size: 1.25em;
    margin: $spacing-md 0 $spacing-sm;
    color: var(--text-primary);
    position: relative;
    padding-left: $spacing-sm;
    border-left: 2px solid $primary;
  }

  :deep(h5, h6) {
    font-size: 1.1em;
    margin: $spacing-md 0 $spacing-sm;
    color: var(--text-primary);
  }

  :deep(p) {
    margin: $spacing-md 0 $spacing-lg;
    color: var(--text-secondary);
    line-height: 1.8;
    letter-spacing: 0.01em;
    text-align: justify;
  }

  :deep(a) {
    color: $primary;
    text-decoration: none;
    border-bottom: 1px dashed $primary;
    transition: all 0.3s ease;
    padding: 0 2px;

    &:hover {
      color: var(--primary-dark);
      border-bottom-style: solid;
      background: rgba($primary, 0.05);
    }
  }

  :deep(blockquote) {
    margin: $spacing-lg 0;
    padding: $spacing-md $spacing-lg;
    background: var(--hover-bg);
    border-left: 4px solid $primary;
    border-radius: $border-radius-sm;
    color: var(--text-secondary);
    font-style: italic;
    position: relative;

    &::before {
      content: '"';
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: 2em;
      color: rgba($primary, 0.2);
      font-family: serif;
    }

    p {
      margin: 0;
      padding-left: $spacing-md;
    }
  }

  :deep(strong, b) {
    font-weight: 600;
    color: var(--text-primary);
    padding: 0 2px;
  }

  :deep(em, i) {
    color: #8250df;
    font-style: italic;
    padding: 0 1px;
  }

  :deep(ul),
  :deep(ol) {
    margin: $spacing-md 0;
    padding-left: $spacing-xl;
    color: var(--text-secondary);

    li {
      margin-bottom: $spacing-sm;
      position: relative;

      &::marker {
        color: $primary;
      }
    }
  }

  :deep(code:not([class])) {
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    color: #e83e8c;
    background: rgba(227, 227, 227, 0.5);
    border-radius: 4px;
    padding: 2px 5px;
    margin: 0 2px;
    font-family: 'Fira Code', monospace, Consolas;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }

  :deep(pre) {
    margin: 1em 0;
    position: relative;
    background: #282c34;
    border-radius: 10px;
    padding-top: 2.5em;
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.4s ease-in-out;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);

    &.collapsed {
      max-height: 300px;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(transparent, #282c34);
        pointer-events: none;
        z-index: 2;
      }

      .expand-button {
        display: flex !important;
      }
    }

    .expand-button {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      padding: 8px 18px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 20px;
      color: #abb2bf;
      cursor: pointer;
      z-index: 3;
      font-size: 0.9em;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
      white-space: nowrap;
      backdrop-filter: blur(4px);

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        transform: translateX(-50%) translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
      }

      i {
        font-size: 14px;
      }
    }

    /* 添加行号容器样式 */
    .line-numbers {
      position: absolute;
      left: 0;
      top: 2.5em;
      bottom: 0;
      font-size: 14px;
      padding: 1em 0;
      text-align: right;
      color: #606060;
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(45, 50, 59, 0.7);
      user-select: none;
      z-index: 1;

      span {
        display: block;
        padding: 0 0.5em;
        min-width: 2.5em;
        line-height: 1.5;
        font-variant-numeric: tabular-nums;
      }
    }

    /* 调整代码内容的样式 */
    code {
      display: block;
      padding: 1em;
      padding-left: 4em;
      margin-left: 0;
      overflow-x: auto;
      font-family: 'Fira Code', monospace, Consolas, Monaco;
      font-size: 14px;
      line-height: 1.6;
      position: relative;
    }

    /* 添加仿 macOS 风格的按钮 */
    &::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 12px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #ff5f56;
      box-shadow:
        20px 0 0 #ffbd2e,
        40px 0 0 #27c93f;
    }

    /* 复制按钮容器 */
    .code-header {
      position: absolute;
      top: 8px;
      right: 12px;
      z-index: 2;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    /* 显示复制按钮 */
    &:hover .code-header {
      opacity: 1;
    }

    /* 复制按钮样式 */
    .copy-button {
      padding: 4px 12px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 15px;
      color: #abb2bf;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(4px);

      i {
        font-size: 14px;
      }

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      }

      &.copied {
        background: #98c379;
        color: #fff;
      }
    }
  }

  :deep(img.lazy-image) {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.3s ease;
    transform: scale(0.98);

    &.loaded {
      opacity: 1;
      transform: scale(1);
    }

    &.error {
      opacity: 0.7;
      filter: grayscale(0.5);
      border: 1px dashed #ddd;
    }
  }

  :deep(img) {
    max-width: 100%;
    border-radius: $border-radius-md;
    margin: $spacing-lg auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: $shadow-md;
    cursor: zoom-in;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.05);

    &:hover {
      transform: translateY(-2px);
      box-shadow: $shadow-lg;
      filter: brightness(1.03);
    }
  }

  :deep(table) {
    width: 100%;
    margin: $spacing-lg 0;
    border-collapse: collapse;
    border-radius: $border-radius-md;
    overflow: hidden;

    th,
    td {
      padding: $spacing-sm $spacing-md;
      border: 1px solid var(--border-color);
    }

    th {
      background: var(--hover-bg);
      color: var(--text-primary);
      font-weight: 500;
      text-align: left;
    }

    tr:nth-child(even) {
      background: var(--hover-bg);
    }
  }

  :deep(hr) {
    margin: $spacing-xl 0;
    border: none;
    height: 1px;
    background: var(--border-color);
    position: relative;

    &::before {
      content: '§';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: var(--card-bg);
      padding: 0 $spacing-lg;
      color: var(--text-secondary);
      font-size: 1.2em;
    }
  }

  .locked-content {
    position: relative;

    .preview-content {
      max-height: 300px;
      overflow: hidden;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(transparent, var(--card-bg));
        pointer-events: none;
      }
    }

    .content-locker {
      position: relative;
      margin-top: -60px;
      padding: $spacing-xl;
      text-align: center;
      background: var(--card-bg);
      border-radius: $border-radius-lg;
      box-shadow: $shadow-lg;
      z-index: 1;
      animation: fadeInUp 0.6s ease-out;

      .locker-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto $spacing-lg;
        background: rgba($primary, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        animation: pulse 2s infinite;

        i {
          font-size: 1.8em;
          color: $primary;
        }
      }

      h3 {
        color: var(--text-primary);
        font-size: 1.4em;
        margin-bottom: $spacing-sm;
      }

      p {
        color: var(--text-secondary);
        margin-bottom: $spacing-lg;
      }

      .locker-progress {
        margin: $spacing-lg 0;

        .progress-steps {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: $spacing-sm;
          max-width: 400px;
          margin: 0 auto;

          .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: $spacing-xs;
            position: relative;
            transition: all 0.3s ease;

            .step-circle {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background: var(--hover-bg);
              display: flex;
              align-items: center;
              justify-content: center;
              border: 2px solid var(--border-color);
              transition: all 0.3s ease;

              i {
                color: var(--text-secondary);
                font-size: 1em;
                transition: all 0.3s ease;
              }
            }

            .step-label {
              font-size: 0.9em;
              color: var(--text-secondary);
              font-weight: 500;
              transition: all 0.3s ease;
            }

            &.completed {
              .step-circle {
                background: rgba($primary, 0.1);
                border-color: $primary;
                box-shadow: 0 0 0 3px rgba($primary, 0.2);
                transform: scale(1.05);

                i {
                  color: $primary;
                }
              }

              .step-label {
                color: $primary;
              }
            }
          }

          .progress-line {
            flex: 1;
            height: 2px;
            background: var(--border-color);
            position: relative;
            max-width: 60px;
            transition: all 0.3s ease;

            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 0;
              background: $primary;
              transition: width 0.6s ease;
            }

            &.active {
              &::after {
                width: 100%;
              }
            }
          }
        }
      }

      .el-button {
        padding: $spacing-sm $spacing-xl;
        font-size: 1.1em;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
      }
    }

    &.member .locker-icon {
      background: rgba(#FFD700, 0.1);

      i {
        color: #FFD700;
      }
    }

    &.paid .locker-icon {
      background: rgba(#E6162D, 0.1);

      i {
        color: #E6162D;
      }
    }

    &.review .locker-icon {
      background: rgba(#409EFF, 0.1);

      i {
        color: #409EFF;
      }
    }
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba($primary, 0.4);
    }

    70% {
      box-shadow: 0 0 0 10px rgba($primary, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba($primary, 0);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.article-footer {
  padding: $spacing-md * 2;
  border-top: 1px solid var(--border-color);

  @include responsive(lg) {
    padding: $spacing-sm;
  }

  .copyright-notice {
    margin-bottom: $spacing-xl;
    background: var(--hover-bg);
    border-radius: $border-radius-lg;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    }

    .notice-header {
      padding: $spacing-md $spacing-lg;
      background: linear-gradient(to right, rgba($primary, 0.15), rgba($primary, 0.05));
      color: $primary;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transform: translateX(-100%);
      }

      &:hover::before {
        animation: shine 1.5s infinite;
      }

      i {
        font-size: 1.1em;
      }
    }

    .notice-content {
      padding: $spacing-lg;
      color: var(--text-secondary);
      font-size: 0.95em;
      line-height: 1.6;
      border-top: 1px dashed rgba($primary, 0.1);

      .notice-item {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        padding: $spacing-xs 0;
        transition: transform 0.2s ease;

        &:hover {
          transform: translateX(3px);
        }

        i {
          color: $primary;
          font-size: 1em;
          width: 16px;
          text-align: center;
          transition: transform 0.3s ease;
        }

        &:hover i {
          transform: scale(1.2);
        }

        a {
          color: $primary;
          text-decoration: none;
          border-bottom: 1px dashed $primary;
          transition: all 0.2s ease;
          padding: 0 2px;

          &:hover {
            border-bottom-style: solid;
            background: rgba($primary, 0.05);
          }
        }

        &.notice-warning {
          margin-top: $spacing-md;
          padding: $spacing-md;
          background: rgba(255, 152, 0, 0.05);
          border-left: 3px solid #ff9800;
          border-radius: $border-radius-sm;
          position: relative;

          &:hover {
            transform: none;
            background: rgba(255, 152, 0, 0.08);
          }

          i {
            color: #ff9800;
            font-size: 1.1em;
          }
        }
      }
    }
  }

  @keyframes shine {
    0% {
      transform: translateX(-100%);
    }

    60% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(100%);
    }
  }

  .tags-section {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    margin-bottom: $spacing-xl;
    padding: $spacing-md;
    background: var(--hover-bg);
    border-radius: $border-radius-lg;
    border: 1px dashed var(--border-color);

    i {
      color: $primary;
      font-size: 1.2em;
      animation: tagIconPulse 3s ease-in-out infinite;
    }

    .tags-list {
      display: flex;
      flex-wrap: wrap;
      gap: $spacing-sm;
    }

    .tag-item {
      padding: 6px 12px;
      background: rgba($primary, 0.05);
      color: var(--text-secondary);
      border-radius: 20px;
      font-size: 0.9em;
      text-decoration: none;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba($primary, 0.1);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
        transform: translateX(-100%);
      }

      &:hover {
        background: $primary;
        color: white;
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 4px 8px rgba($primary, 0.25);

        &::before {
          animation: tagShine 1s forwards;
        }
      }
    }
  }

  .article-actions {
    display: flex;
    justify-content: center;
    gap: $spacing-xl;
    margin-bottom: $spacing-xl;
    padding: $spacing-md 0;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--border-color), transparent);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50%;
      height: 1px;
      background: linear-gradient(to right, transparent, var(--border-color), transparent);
    }

    .action-btn {
      display: inline-flex;
      align-items: center;
      gap: $spacing-sm;
      padding: 8px 24px;
      border: none;
      border-radius: 50px;
      font-size: 1em;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

      i {
        transition: transform 0.3s ease;
      }

      &:hover i {
        transform: scale(1.2);
      }

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
        transform: translateX(-100%);
        transition: transform 0.5s ease;
      }

      &:hover::before {
        transform: translateX(100%);
      }

      &.like {
        background: linear-gradient(to right, #ffefba, #ffffff);
        color: #e83e8c;
        font-weight: 500;
        border: 1px solid rgba(232, 62, 140, 0.2);

        &.active {
          background: linear-gradient(to right, #ff9a9e, #fad0c4);
          color: white;
          border-color: transparent;

          i {
            animation: heartBeat 1.5s infinite;
          }
        }

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 4px 12px rgba(232, 62, 140, 0.2);
        }
      }

      &.share {
        background: linear-gradient(to right, #4facfe, #00f2fe);
        color: white;
        font-weight: 500;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 16px rgba(79, 172, 254, 0.3);
        }
      }
    }
  }

  @keyframes tagIconPulse {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(10deg);
    }

    75% {
      transform: rotate(-10deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }

  @keyframes tagShine {
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes heartBeat {
    0% {
      transform: scale(1);
    }

    14% {
      transform: scale(1.3);
    }

    28% {
      transform: scale(1);
    }

    42% {
      transform: scale(1.3);
    }

    70% {
      transform: scale(1);
    }
  }

  :deep(.share-dropdown) {
    position: relative;

    .share-menu {
      position: absolute;
      bottom: calc(100% + 8px);
      right: 0;
      background: var(--card-bg);
      border-radius: $border-radius-lg;
      box-shadow: $shadow-lg;
      padding: $spacing-xs;
      min-width: 180px;
      z-index: 100;
      border: 1px solid var(--border-color);
      transform-origin: bottom right;
      animation: shareMenuIn 0.2s ease;

      &::before {
        content: '';
        position: absolute;
        bottom: -5px;
        right: 20px;
        width: 10px;
        height: 10px;
        background: var(--card-bg);
        border-left: 1px solid var(--border-color);
        border-top: 1px solid var(--border-color);
        transform: rotate(225deg);
      }

      .share-item {
        width: 100%;
        padding: $spacing-sm $spacing-lg;
        border: none;
        background: none;
        color: var(--text-secondary);
        font-size: 0.95em;
        display: flex;
        align-items: center;
        gap: $spacing-md;
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: $border-radius-sm;

        i {
          width: 16px;
          text-align: center;
          font-size: 1.1em;

          &.fa-qq {
            color: #12B7F5;
          }

          &.fa-star {
            color: #FFD700;
          }

          &.fa-weibo {
            color: #E6162D;
          }

          &.fa-weixin {
            color: #07C160;
          }

          &.fa-link {
            color: $primary;
          }
        }

        &:hover {
          background: var(--hover-bg);
          padding-left: $spacing-xl;
        }

        &:active {
          transform: scale(0.95);
        }
      }
    }
  }
}


.article-sidebar {
  position: relative;
  height: fit-content;

  .toc-container {
    position: sticky;
    top: 90px;
    background: var(--card-bg);
    border-radius: $border-radius-lg;
    box-shadow: $shadow-md;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    z-index: 10;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, transparent, rgba($primary, 0.03), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover::before {
      opacity: 1;
    }

    .toc-header {
      padding: $spacing-lg;
      background: var(--hover-bg);
      color: var(--text-primary);
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: $spacing-sm;
      position: relative;
      border-bottom: 1px solid var(--border-color);
      justify-content: space-between;
      flex-shrink: 0;

      .title-wrapper {
        display: flex;
        align-items: center;
        gap: $spacing-sm;

        i {
          color: $primary;
          font-size: 1.1em;
          transform-origin: center;
          animation: tocIconPulse 2s infinite;
        }
      }

      .toc-controls {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
      }

      .auto-scroll-controls {
        position: relative;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .auto-scroll-btn,
      .speed-settings-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba($primary, 0.05);
        border: 1px solid rgba($primary, 0.1);
        color: var(--text-secondary);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: rgba($primary, 0.1);
          transform: scale(1.05);

          i {
            color: $primary;
          }
        }

        &.active {
          background: rgba($primary, 0.15);
          border-color: rgba($primary, 0.3);
          color: $primary;
          animation: pulsate 1.5s infinite;

          i {
            color: $primary;
          }
        }

        i {
          font-size: 0.8em;
          transition: all 0.3s ease;
        }
      }

      .speed-settings-btn {
        font-size: 0.9em;

        &:hover {
          background: rgba($primary, 0.1);
        }
      }

      .speed-control-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        width: 220px;
        background: var(--card-bg);
        border-radius: $border-radius-md;
        box-shadow: $shadow-lg;
        border: 1px solid var(--border-color);
        z-index: 100;
        overflow: hidden;

        .panel-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 12px;
          background: var(--hover-bg);
          border-bottom: 1px solid var(--border-color);

          span {
            font-weight: 500;
            font-size: 0.95em;
            color: var(--text-primary);
          }

          .close-panel-btn {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: none;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--text-secondary);

            &:hover {
              background: rgba(0, 0, 0, 0.05);
              color: var(--text-primary);
            }

            i {
              font-size: 0.8em;
            }
          }
        }

        .speed-options {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding: 12px;

          .speed-option-btn {
            flex: 1;
            min-width: 60px;
            padding: 6px 8px;
            border-radius: $border-radius-sm;
            border: 1px solid var(--border-color);
            background: var(--hover-bg);
            color: var(--text-secondary);
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.3s ease;

            &:hover {
              background: rgba($primary, 0.05);
              color: $primary;
            }

            &.active {
              background: rgba($primary, 0.1);
              color: $primary;
              border-color: rgba($primary, 0.3);
              font-weight: 500;
            }
          }
        }

        .custom-speed {
          padding: 0 12px 12px;

          span {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9em;
            color: var(--text-secondary);
          }

          :deep(.el-slider__bar) {
            background-color: $primary;
          }

          :deep(.el-slider__button) {
            border-color: $primary;
          }
        }
      }

      /* 淡入淡出动画 */
      .fade-enter-active,
      .fade-leave-active {
        transition: opacity 0.3s, transform 0.3s;
      }

      .fade-enter-from,
      .fade-leave-to {
        opacity: 0;
        transform: translateY(-10px);
      }


      .progress-wrapper {
        font-size: 0.9em;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: $spacing-xs;
        padding: 4px 8px;
        background: rgba($primary, 0.05);
        border-radius: $border-radius-lg;
        transition: all 0.3s ease;
        border: 1px solid rgba($primary, 0.1);

        &.completed {
          background: rgba($primary, 0.2);
          color: $primary;
          font-weight: 500;

          i {
            animation: tocCompletedPulse 2s infinite;
          }
        }

        i {
          color: $primary;
          font-size: 0.9em;
        }

        .progress-text {
          font-variant-numeric: tabular-nums;
          min-width: 2.5em;
          text-align: right;

          &::after {
            content: '%';
            margin-left: 2px;
            opacity: 0.7;
          }
        }
      }
    }

    .toc-content {
      padding: $spacing-lg;
      overflow-y: auto;
      position: relative;
      flex-grow: 1;
      scrollbar-width: thin;
      scrollbar-color: rgba($primary, 0.2) transparent;
      max-height: 60vh;

      &::-webkit-scrollbar {
        width: 5px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba($primary, 0.2);
        border-radius: 20px;
        border: transparent;
      }

      &::before {
        content: '';
        position: absolute;
        left: 24px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(to bottom,
            transparent,
            rgba($primary, 0.1),
            rgba($primary, 0.1),
            transparent);
      }

      .toc-item {
        padding: $spacing-sm 0;
        margin: 2px 0;
        cursor: pointer;
        border-radius: $border-radius-sm;
        color: var(--text-secondary);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        font-size: 0.95em;
        line-height: 1.4;
        position: relative;
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        padding-left: 16px;
        position: relative;

        .toc-indicator {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6px;
          height: 6px;
          color: $primary;
          font-size: 1.5em;
          line-height: 0;
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .toc-text {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          max-width: 100%;
          padding-right: 8px;
        }

        &:hover {
          color: $primary;
          background: linear-gradient(90deg,
              rgba($primary, 0.05),
              rgba($primary, 0.02));

          .toc-indicator {
            opacity: 0.7 !important;
          }
        }

        &.active {
          color: $primary;
          background: linear-gradient(90deg,
              rgba($primary, 0.1),
              rgba($primary, 0.05));
          font-weight: 500;
          position: relative;
          overflow: hidden;

          /* 添加闪光效果 */
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transform: translateX(-100%);
            animation: activeItemShine 2s infinite;
          }
        }

        &.level-1 {
          font-weight: 500;
          font-size: 1em;
          padding-left: 16px;
          margin-top: 8px;
          color: var(--text-primary);
        }

        &.level-2 {
          font-size: 0.95em;
          padding-left: 24px;
        }

        &.level-3 {
          font-size: 0.9em;
          padding-left: 32px;
          opacity: 0.9;
        }

        &.level-4 {
          font-size: 0.88em;
          padding-left: 40px;
          opacity: 0.85;
        }

        &.level-5,
        &.level-6 {
          font-size: 0.86em;
          padding-left: 48px;
          opacity: 0.8;

          &:hover {
            opacity: 1;
          }
        }
      }

      /* 增加分组效果 */
      .toc-group {
        position: relative;
        margin: $spacing-sm 0 $spacing-md;

        &::after {
          content: '';
          position: absolute;
          bottom: -$spacing-xs;
          left: 20px;
          right: 0;
          height: 1px;
          background: linear-gradient(to right, rgba($primary, 0.1), transparent);
        }
      }
    }
  }
}

/* 添加目录图标动画 */
@keyframes tocIconPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes tocCompletedPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes tocDotPulse {
  0% {
    box-shadow: 0 0 0 0 rgba($primary, 0.4);
  }

  70% {
    box-shadow: 0 0 0 4px rgba($primary, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba($primary, 0);
  }
}

@keyframes shareMenuIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.desktop-only {
  @include responsive(lg) {
    display: none;
  }
}

/* 移动端操作栏样式 */
@include responsive(lg) {
  .action-bar-container {
    position: fixed;
    left: 5px;
    top: 30%;
    transform: translateY(-50%);
    z-index: 999;
  }

  .action-bar-trigger {
    width: 20px;
    height: 50px;

    i {
      font-size: 14px;
    }
  }

  .action-button {
    width: 36px;
    height: 36px;

    i {
      font-size: 16px;
    }
  }

  .action-bar-content {
    gap: 16px;
  }

  /* 调整打赏弹出框位置 */
  .reward-item .reward-popup {
    left: 110%;
    width: 250px;

    .reward-content {
      flex-direction: column;
      align-items: center;

      .reward-qr-container {
        width: 100px;

        .reward-qr {
          width: 100px;
          height: 100px;
        }
      }

      .reward-text {
        font-size: 12px;
      }
    }
  }
}

.floating-action-bar {
  position: fixed;
  top: 40%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: $spacing-md * 1.5;
  padding: $spacing-sm;
  border-radius: $border-radius-lg;
  z-index: 100;
  transition: left 0.3s ease;

  .action-item {
    cursor: pointer;

    .action-button {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: var(--card-bg);
      transition: all 0.3s ease;

      i {
        font-size: 1.2em;
        color: var(--text-secondary);
        transition: all 0.3s ease;

        &.active {
          color: $primary;
        }
      }
    }

    .action-count {
      font-size: 0.8em;
      color: var(--text-secondary);
      min-width: 20px;
      text-align: center;
    }

    &:hover {
      .action-button {
        background: rgba($primary, 0.1);
        transform: translateY(-2px);

        i {
          color: $primary;
          transform: scale(1.1);
        }
      }
    }
  }

  .reward-item {
    position: relative;

    .reward-popup {
      position: absolute;
      left: calc(100% + 16px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--card-bg);
      border-radius: $border-radius-lg;
      padding: $spacing-md;
      box-shadow: $shadow-lg;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      pointer-events: none;
      width: 510px;

      &::before {
        content: '';
        position: absolute;
        left: -6px;
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: var(--card-bg);
        border-radius: 2px;
      }

      .reward-content {
        display: flex;
        gap: $spacing-md;
        margin-bottom: $spacing-sm;

        .reward-qr {
          width: 250px;
          height: 250px;
          border-radius: $border-radius-sm;
          object-fit: cover;
        }
      }

      .reward-text {
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.9em;
      }
    }

    &:hover {
      .reward-popup {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(-50%) translateX(8px);
      }
    }
  }
}

.ai-description {
  margin: $spacing-md $spacing-xl;
  border-radius: $border-radius-lg;
  background-image: linear-gradient(135deg, rgba(147, 197, 253, 0.15), rgba(167, 139, 250, 0.15));
  border: 1px solid rgba(167, 139, 250, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);

  @include responsive(sm) {
    margin: $spacing-sm;
  }

  .ai-header {
    padding: $spacing-sm $spacing-md;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    justify-content: flex-start;
    color: #a855f7;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.1), transparent);
      z-index: 0;
      transform: translateX(-100%);
    }

    &:hover::before {
      animation: aiHeaderShine 2s ease-in-out infinite;
    }

    i {
      font-size: 1.2em;
      animation: aiIconFloat 3s ease-in-out infinite;
      z-index: 1;
    }

    span {
      z-index: 1;
    }
  }

  .ai-content {
    padding: $spacing-md $spacing-lg;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.7);
    border-top: 1px solid rgba(167, 139, 250, 0.1);
    position: relative;

    .typing-text {
      display: block;
      line-height: 1.6;
      color: #333;
      position: relative;

      &::after {
        content: '|';
        display: inline-block;
        animation: cursorBlink 1s step-end infinite;
        opacity: 0;
      }
    }
  }

  .ai-description-text {
    margin-top: $spacing-sm;
    color: #8c8a8e;
    text-align: right;
    font-size: 0.85em;
    font-style: italic;
  }
}

@keyframes aiHeaderShine {
  0% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes aiIconFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes cursorBlink {

  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  opacity: 0;
  height: 0;
  transform: translateY(-10px);
}

.expand-enter-to,
.expand-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.article-detail-page {
  .article-page-content {
    max-width: 1300px;
    margin: 0 auto;
    padding: $spacing-lg;
    position: relative;
    overflow: visible;

    @include responsive(lg) {
      padding: $spacing-sm;
    }
  }

  // 调整文章头部的上边距，避免与封面重叠
  .article-main {
    margin-top: -100px; // 从-80px改为-100px，增加与封面的间距
    position: relative;
    z-index: 2;

    @include responsive(lg) {
      margin-top: -60px; // 移动端较小的间距
    }

    @include responsive(sm) {
      margin-top: -40px; // 小屏幕下更小的间距
    }
  }
}

/* 优化图片标题样式 */
:deep(figure) {
  margin: $spacing-lg 0;
  text-align: center;

  figcaption {
    margin-top: $spacing-xs;
    color: var(--text-secondary);
    font-size: 0.9em;
    font-style: italic;
  }
}

/* 添加图片放大悬浮效果指示器 */
:deep(img):not(.no-zoom) {
  position: relative;

  &::after {
    content: '🔍';
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover::after {
    opacity: 0.8;
  }
}

/* 添加激活项闪光效果 */
@keyframes activeItemShine {
  0% {
    transform: translateX(-100%);
  }

  50%,
  100% {
    transform: translateX(100%);
  }
}

/* 自动滚动按钮脉动动画 */
@keyframes pulsate {
  0% {
    box-shadow: 0 0 0 0 rgba($primary, 0.4);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 6px rgba($primary, 0);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 rgba($primary, 0);
    transform: scale(1);
  }
}

.draft-restricted {
  text-align: center;
  padding: $spacing-lg;
  background: rgba(255, 255, 255, 0.8);
  border-radius: $border-radius-lg;
  box-shadow: $shadow-lg;
  margin-bottom: $spacing-lg;

  .restricted-icon {
    font-size: 4em;
    color: #ff9800;
    margin-bottom: $spacing-sm;
  }

  h2 {
    font-size: 1.5em;
    margin-bottom: $spacing-sm;
  }

  p {
    font-size: 1em;
    color: #333;
  }
}

.restricted-content,
.draft-restricted {
  padding: $spacing-xl;
  text-align: center;
  background-color: var(--hover-bg);
  border-radius: $border-radius-lg;

  :deep(h2) {
    color: var(--text-primary);
    margin-bottom: $spacing-md;
  }

  :deep(p) {
    color: var(--text-secondary);
  }
}

.article-status-alert {
  background: rgba(255, 152, 0, 0.1);
  border-left: 4px solid #ff9800;
  padding: 12px 16px;
  margin: $spacing-md 0;
  border-radius: $border-radius-sm;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d98202;
  font-weight: 500;

  i {
    font-size: 1.2em;
  }

  .status-tip {
    margin-left: auto;
    font-size: 0.9em;
    font-style: italic;
    opacity: 0.8;
  }
}

/* 调整文章头部的上边距，避免与封面重叠 */
.article-main {
  margin-top: -100px;
  position: relative;
  z-index: 2;

  @include responsive(lg) {
    margin-top: -60px; // 移动端较小的间距
  }

  @include responsive(sm) {
    margin-top: -40px; // 小屏幕下更小的间距
  }
}

.restricted-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  padding: $spacing-xl * 2;
  text-align: center;

  .restricted-icon {
    font-size: 4em;
    color: $primary;
    opacity: 0.5;
    margin-bottom: $spacing-lg;
    animation: icon-fade-in 1s ease-out;
  }

  .restricted-title {
    font-size: 2.2em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: $spacing-sm;
    animation: title-fade-in 0.8s ease-out 0.2s both;
  }

  .restricted-text {
    font-size: 1.1em;
    color: var(--text-secondary);
    max-width: 400px;
    animation: text-fade-in 0.8s ease-out 0.4s both;
  }
}

@keyframes icon-fade-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 0.5;
    transform: scale(1);
  }
}

@keyframes title-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes text-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.article-main.is-restricted {
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  min-height: 60vh;
}

.restricted-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  .restricted-icon {
    font-size: 4em;
    color: var(--text-primary);
    margin-bottom: $spacing-sm;
    animation: title-fade-in 0.8s ease-out 0.2s both;
  }

  .restricted-title {
    font-size: 2.2em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: $spacing-sm;
    animation: title-fade-in 0.8s ease-out 0.2s both;
  }

  .restricted-text {
    font-size: 1.1em;
    color: var(--text-secondary);
    max-width: 400px;
    animation: text-fade-in 0.8s ease-out 0.4s both;
  }
}

.content-layout.restricted-mode {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 250px);
  grid-template-columns: 1fr;
  gap: 0;

  .article-main {
    margin-top: 0;
    width: 100%;
    max-width: 720px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }
}

.restricted-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: $spacing-xl * 2;
  text-align: center;

  .restricted-icon {
    font-size: 4.5em;
    color: $primary;
    opacity: 0.5;
    margin-bottom: $spacing-lg;
    animation: icon-fade-in 1s ease-out;
  }

  .restricted-title {
    font-size: 2.2em;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: $spacing-sm;
    animation: title-fade-in 0.8s ease-out 0.2s both;
  }

  .restricted-text {
    font-size: 1.1em;
    color: var(--text-secondary);
    max-width: 400px;
    animation: text-fade-in 0.8s ease-out 0.4s both;
  }
}

.article-navigation {
  background: var(--card-bg, #fff);
  margin: 30px 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.related-articles {
  background: var(--card-bg, #fff);
  margin: 20px 0 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.toc-container {
  background: var(--card-bg, #fff);
}
</style>